Search⌘ K
AI Features
Home
Courses
Integrating Apollo Client with React Applications

The Generated AllBooksQuery Type

Explore how to utilize the generated AllBooksQuery Type in your React application with Apollo Client. Understand how it limits queried fields to ensure TypeScript enforces type safety, preventing runtime errors when accessing GraphQL data. Learn how to update queries and generated types to fix type mismatches and maintain clean, readable, and reliable React code.

We'll cover the following...

The generated AllBooksQuery type and the old AllBooksQuery type

Another generated type in the src/generated/graphql.tsx file that we should focus on is the AllBooksQuery type.

export type AllBooksQuery = (
    { __typename?: 'Query' }
    & { books: Array<(
        { __typename?: 'Book' }
        & Pick<Book, 'title'>
    )>}
);
AllBooksQuery type generated using GraphQL Code Generator

This type defines an object that’s roughly the same shape as our old AllBooksQuery type, shown below:

type AllBooksQuery = {
    books: Book[];
};

Well, almost. The difference between the two is that the generated AllBooksQuery only accepts objects of the Book type that have a title and no other fields. This generated type expects title because that is the only field we’re querying for in our allBooks query, as shown in the code below:

const allBooksQuery = gql`
    query allBooks {
        books {
            title
        }
    }
`;

The generated AllBooksQuery type uses Pick, which is TypeScript code for, “Give me the type of Book, but only the ones with these fields.” This means that a response with this shape would be valid according to the BooksQuery type.

{
    __typename: 'Query',
    books: [
        {
            __typename: 'Book',
            title: 'Active Rails'
        }
}

But a response with an extra field such as author or id, like in the code snippet below, would be invalid since we’re limiting the fields of Book to just title.

{
    __typename: 'Query',
    books: [
        {
             __typename: 'Book',
            id: '1',
            title: 'Active Rails'
        }
}

These types generated by GraphQL Code Generator, such as AllBooksQuery, will be restricted to the ...