Revision history [back]

TypeScript can be used to type a response from GraphQL by creating a TypeScript interface that matches the shape of the response. The interface can then be used to annotate the return type of the GraphQL query or mutation in the code.

For example, consider a GraphQL query that returns an object with two fields - name and age:

query GetUser {
  user(id: 123) {
    name
    age
  }
}

To type the response using TypeScript, we can create an interface that defines the shape of the response:

interface User {
  name: string;
  age: number;
}

In the code, we can annotate the return type of the query with this interface:

import { gql } from 'graphql-request';

const GET_USER_QUERY = gql`
  query GetUser {
    user(id: 123) {
      name
      age
    }
  }
`;

async function getUser(): Promise<User> {
  const { user } = await client.request(GET_USER_QUERY);
  return user;
}

This way, the response from the GraphQL query will be automatically type-checked by TypeScript, ensuring that it matches the expected shape defined by the interface.