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.
Asked: 2023-03-12 11:00:00 +0000
Seen: 15 times
Last updated: Jan 01 '23