Skip to main content

Generated Code

Let's examine the code generated by the following GraphQL operations:

book.graphql
fragment BookFragment on Book {
  id
  name
  genre
  authorId
}

query Books($name: String, $genre: String, $authorId: ID) {
  books(name: $name, genre: $genre, authorId: $authorId) {
    ...BookFragment
  }
}

mutation UpdateBook($id: ID!, $book: UpdateBookInput!) {
  updateBook(id: $id, book: $book) {
    ...BookFragment
  }
}

Query​

One of the main elements of the generated code BOOKS_QUERY document with its companion gqlBooksQuery function:

export const BOOKS_QUERY = gql`
  query Books($name: String, $genre: String, $authorId: ID) {
    books(name: $name, genre: $genre, authorId: $authorId) {
      ...BookFragment
    }
  }
  ${BookFragmentDoc}` as DocumentNode<BooksQueryData, BooksQueryVariables>;

export function gqlBooksQuery(): { query: typeof BOOKS_QUERY };
export function gqlBooksQuery(variables?: BooksQueryVariables): { query: typeof BOOKS_QUERY, variables: typeof variables };
export function gqlBooksQuery(variables: () => BooksQueryVariables | undefined): { query: typeof BOOKS_QUERY, variables: typeof variables };
export function gqlBooksQuery(variables?: any): any {
  return {
    query: BOOKS_QUERY,
    variables
  };
}

The gql function is syntactic sugar generated for Books GraphQL query and accepts an optional query variables parameter and can be used to query data as follows:

query​

Vanilla
this.apollo.query({
  query: BOOKS_QUERY,
  variables: { genre: 'Fiction' }
});
With gql function
this.apollo.query(
  gqlBooksQuery({ genre: 'Fiction' })
);

watchQuery​

Vanilla
this.apollo.watchQuery({
  query: BOOKS_QUERY,
  variables: { genre: 'Fiction' }
});
With gql function
this.apollo.watchQuery(
  gqlBooksQuery({ genre: 'Fiction' })
);

signal.query​

Vanilla
this.apollo.signal.query({
  query: BOOKS_QUERY,
  variables: () => ({ genre: 'Fiction' })
});
With gql function
this.apollo.signal.query(
  gqlBooksQuery(() => ({ genre: 'Fiction' }))
);

Passing additional options​

To pass additional query options, simply spread the result of gqlBooksQuery into the query options object:

this.apollo.watchQuery({
  ...gqlBooksQuery({ genre: 'Fiction' }),
  fetchPolicy: 'network-only',
  notifyOnNetworkStatusChange: true
});

Mutation​

Secondly, we have UPDATE_BOOK_MUTATION document with its companion gqlUpdateBookMutation function:

export const UPDATE_BOOK_MUTATION = gql`
  mutation UpdateBook($id: ID!, $book: UpdateBookInput!) {
    updateBook(id: $id, book: $book) {
      ...BookFragment
    }
  }
  ${BookFragmentDoc}` as DocumentNode<UpdateBookMutationData, UpdateBookMutationVariables>;

export function gqlUpdateBookMutation(variables: UpdateBookMutationVariables): { mutation: typeof UPDATE_BOOK_MUTATION, variables: typeof variables } {
  return {
    mutation: UPDATE_BOOK_MUTATION,
    variables
  };
}

The gql function here is generated with required mutation variables parameter and can be used to execute mutations as follows:

mutate​

Vanilla
this.apollo.mutate({
  mutation: UPDATE_BOOK_MUTATION,
  variables: {
    id: '1',
    book: { name: 'New Name' }
  }
}).subscribe();
With gql function
this.apollo.mutate(
  gqlUpdateBookMutation({ 
    id: '1', 
    book: { name: 'New Name' } 
  })
).subscribe();
info

Note that gqlUpdateBookMutation function requires mandatory variables parameter as opposed to gqlBooksQuery which accepts optional parameters.
This is automatically determined by codegen when variables have required fields, providing compile-time safety and ensuring that variables are always provided when required by the GraphQL schema.