How to add __typename automatically to your GraphQL document

Apollo Client offers the option to automatically adds __typename fields to all outgoing queries.

If you use a minimal GraphQL client like graphql-request, then it is necessary to manually adds __typename fields to all outgoing queries.

After going through the documentation and code of Apollo Client, I became aware of the helper function addTypenameToDocument. This function is responsible to manipulate the GraphQL document by adding __typename automatically. You can use this function with any GraphQL client!

In my case, I wrote a little helper function for graphql-request:

import { addTypenameToDocument } from '@apollo/client/utilities'
import { parse } from 'graphql'
import { GraphQLClient } from 'graphql-request'

const client = new GraphQLClient(endpoint)

export const request = (query, variables, requestHeaders) => {
  // Adds "__typename" to the query
  const document = addTypenameToDocument(
    typeof query === 'string' ? parse(query) : query
  )

  return client.request(document, variables, requestHeaders)
}

If you have any kind of feedback, suggestions or ideas - feel free to comment this post!