create-react-app/docusaurus/docs/loading-graphql-files.md

id, title, sidebar_label

id	title	sidebar_label
loading-graphql-files	Loading .graphql Files	Loading .graphql Files

To load .gql and .graphql files, first install the graphql.macro package by running:

npm install --save graphql.macro

Alternatively you may use yarn:

yarn add graphql.macro

Then, whenever you want to load .gql or .graphql files, import the loader from the macro package:

import { loader } from 'graphql.macro';

const query = loader('./foo.graphql');

And your results get automatically inlined! This means that if the file above, foo.graphql, contains the following:

gql`
  query {
    hello {
      world
    }
  }
`;

The previous example turns into:

const query = {
  'kind': 'Document',
  'definitions': [{
    ...
  }],
  'loc': {
    ...
    'source': {
      'body': '\\\\n  query {\\\\n    hello {\\\\n      world\\\\n    }\\\\n  }\\\\n',
      'name': 'GraphQL request',
      ...
    }
  }
};

You can also use the gql template tag the same way you would use the non-macro version from graphql-tag package with the added benefit of inlined parsing results.

import { gql } from 'graphql.macro';
 
const query = gql`
  query User {
    user(id: 5) {
      lastName
      ...UserEntry1
    }
  }
`;