DocumentNode to string while respecting Apollo graphql features

Help
,
1

How do I convert a DocumentNode graphql document to a query string? while still respecting apollo features like the client directive.

I can do this directly with graphql

import { print } from 'graphql';

const query = gql`
  query todos {
     todoCollection {
        id
        name
        color @client
     }
  }
`

const queryAsString = print(query);

However the apollo client does some “magic” like adding __typename and stripping out @client directives, to the query. Are there any way I can take the gql document node and get a query string that matches what apollo client would do?

2

To anyone stumbling upon this aswell, I figured out a way to do it, but you have to implement the logic yourself.

graphql exposes a visit function that can be used to manipulate the AST document directly, and then you can remove all fields with the client directive before you use print.

 visit(ast, {
        Field({ directives = [] }) {
            if (directives.length > 0 && directives.map((v) => v.name.value).includes('client')) {
                return null;
            }
        },
    });

However I’d still be interested if there is an “apollo” way to do this.

3

The function that Apollo Client uses to add __typename can be imported directly:

import { addTypenameToDocument } from '@apollo/client/utilities';

Here’s the source: