Using GraphQL Codegen Typed Document Node Fragment to Create Query

Question

I'm using GraphQL Code Generator to create typed DocumentNode fragments e.g.

export const MMovieConnectionFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MMovieConnection"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"MMovieConnection"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"mMovieActors"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]}}]} as unknown as DocumentNode<MMovieConnectionFragment, unknown>;

I'm trying to use this fragment to create a simple GraphQL query e.g.

gql`query myQuery {
      myQuery {
          ...MMovieConnection
      }
  }
  ${MMovieConnectionFragmentDoc}
`

But this generates error: Cannot read properties of undefined (reading 'source')

If I create a fragment in this standard way, the query is created successfully:

fieldsFragment = gql`fragment MMovieConnection on MMovieConnection {
    edges {
        node {
            id
        }
    }
}`;

The standard fragment object is equivalent to the MMovieConnectionFragmentDoc object but has an additional loc property that includes a source property.

loc: {
    start: 0,
    end: 239,
    source: {
      body: "fragment MMovieConnection on MMovieConnection {\n            edges {\n                node {\n                    id\n                    mMovieActors {\n                        id\n                    }\n                }\n            }\n        }",
      name: "GraphQL request",
      locationOffset: {
        line: 1,
        column: 1,
      },
    },
  },

So gql seems to need the loc and source property when using fragments in queries.

But is there a way to use MMovieConnectionFragmentDoc to create a query?

Matthew · Accepted Answer · 2022-06-29 13:46:26Z

3

Converting the fragment back to a string and then wrapping in gql works.

import * as graphql from 'graphql';

fragment = gql`${graphql.print(MMovieConnectionFragmentDoc)}`;

gql`query myQuery {
        myQuery {
            ...myFragmentName
        }
    }
    ${fragment}
`;

answered Jun 29, 2022 at 13:46

Matthew

3,0915 gold badges40 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Raphael Rafatpanah Over a year ago

Are you aware of any way to get the type of the query's variables from the TypedDocumentNode?

Matthew Over a year ago

Did you find an answer to this? Are you able to provide a more detailed example?

Collectives™ on Stack Overflow

Using GraphQL Codegen Typed Document Node Fragment to Create Query

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related