GraphQLでのデータ取得時にフィールド名を別名で取得する

GraphQLでQueryを実行した際のレスポンスのうち、一部のフィールドを別名で取得したい場合にどうやるのかを調べた。

以下のようなbookというqueryがあったとして、thumbnailUrlにimageという別名を付けたい場合、

const QUERY = gql`
  query book {
    title
    thumbnailUrl
  }
`;

const client = new ApolloClient({ uri: process.env.GRAPHQL_URI });
const { data } = await ApolloClient.query({ query: QUERY });

console.log(data.book.title);
console.log(data.book.thumbnailUrl);

以下のように[[image: thumbnailUrl]]と指定すれば別名で取得できるようになる。

query book {
  title
  image: thumbnailUrl
}

// ...
console.log(data.book.image);

query自体に別名をつけることもできる。

query b: book {
  title
}

// ...
console.log(data.b.title);

参考

• How to expose graphql field with different name - Stack Overflow