@graphql-tools/graphql-tag-pluck

What is @graphql-tools/graphql-tag-pluck?

The @graphql-tools/graphql-tag-pluck package is designed to extract GraphQL query strings from JavaScript and TypeScript files. It can pluck GraphQL queries from template literals in your code, which is useful when you want to separate GraphQL operations from the rest of your JavaScript codebase for preprocessing or compilation purposes.

What are @graphql-tools/graphql-tag-pluck's main functionalities?

Plucking GraphQL queries from JavaScript/TypeScript files

This feature allows you to extract GraphQL queries from a specified JavaScript or TypeScript file. The `gqlPluckFromFile` function reads the file and returns a promise that resolves with the extracted queries.

const { gqlPluckFromFile } = require('@graphql-tools/graphql-tag-pluck');

async function getQueries() {
  const filePath = 'path/to/your/file.js';
  const gqlQueries = await gqlPluckFromFile(filePath);
  console.log(gqlQueries);
}

getQueries();

Plucking GraphQL queries from a string

This feature allows you to extract GraphQL queries from a string containing code. The `gqlPluckFromCodeString` function takes a string as input and returns a promise that resolves with the extracted queries.

const { gqlPluckFromCodeString } = require('@graphql-tools/graphql-tag-pluck');

async function getQueriesFromString(codeString) {
  const gqlQueries = await gqlPluckFromCodeString(codeString);
  console.log(gqlQueries);
}

const code = "const query = gql`{ user { id } }`";
getQueriesFromString(code);

Other packages similar to @graphql-tools/graphql-tag-pluck

graphql-tag

The graphql-tag package is commonly used to parse GraphQL query strings into a standard GraphQL AST. It is similar to @graphql-tools/graphql-tag-pluck in that it deals with GraphQL queries in JavaScript files, but it does not provide the functionality to extract queries from arbitrary code locations.

babel-plugin-graphql-tag

This package provides a Babel plugin that compiles GraphQL queries using the graphql-tag library at build time. It is similar to @graphql-tools/graphql-tag-pluck in that it processes GraphQL queries in JavaScript files, but it operates as part of the Babel compilation process rather than as a standalone tool for extracting queries.

README

GraphQL Tag Pluck

@graphql-tools/graphql-tag-pluck will take JavaScript code as an input and will pluck all template literals provided to graphql-tag.

Input:

import gql from 'graphql-tag';

const fragment = gql`
  fragment Foo on FooType {
    id
  }
`;

const doc = gql`
  query foo {
    foo {
      ...Foo
    }
  }

  ${fragment}
`;

Output:

fragment Foo on FooType {
  id
}

query foo {
  foo {
    ...Foo
  }
}

Originally created because of https://graphql-code-generator.com/.

Usage

@graphql-tools/graphql-tag-pluck is installable via NPM (or Yarn):

$ npm install @graphql-tools/graphql-tag-pluck

Once installed you can pluck GraphQL template literals using one of the following methods:

import gqlPluck, { gqlPluckFromFile, gqlPluckFromCodeString } from '@graphql-tools/graphql-tag-pluck';

// Returns promise
gqlPluck.fromFile(filePath, {
  useSync: true, // Optional, will return string if so
});

// Returns string
gqlPluck.fromFile.sync(filePath);

// Returns string
gqlPluck.fromCodeString(codeString, {
  fileExt: '.ts', // Optional, defaults to '.js'
});

Template literals leaded by magic comments will also be extracted :-)

/* GraphQL */ `
  enum MessageTypes {
    text
    media
    draftjs
  }
`;

supported file extensions are: .js, .jsx, .ts, .tsx, .flow, .flow.js, .flow.jsx, .graphqls, .graphql, .gqls, .gql.

Options

I recommend you to look at the source code for a clearer understanding of the transformation options.

• gqlMagicComment

  The magic comment anchor to look for when parsing GraphQL strings. Defaults to graphql, which may be translated into /* GraphQL */ in code.

• globalGqlIdentifierName

  Allows to use a global identifier instead of a module import.

  // `graphql` is a global function
  export const usersQuery = graphql`
    {
      users {
        id
        name
      }
    }
  `;
  

• modules

  An array of packages that are responsible for exporting the GraphQL string parser function. The following modules are supported by default:

  {
    modules: [
      {
        // import gql from 'graphql-tag'
        name: 'graphql-tag',
      },
      {
        name: 'graphql-tag.macro',
      },
      {
        // import { graphql } from 'gatsby'
        name: 'gatsby',
        identifier: 'graphql',
      },
      {
        name: 'apollo-server-express',
        identifier: 'gql',
      },
      {
        name: 'apollo-server',
        identifier: 'gql',
      },
      {
        name: 'react-relay',
        identifier: 'graphql',
      },
      {
        name: 'apollo-boost',
        identifier: 'gql',
      },
      {
        name: 'apollo-server-koa',
        identifier: 'gql',
      },
      {
        name: 'apollo-server-hapi',
        identifier: 'gql',
      },
      {
        name: 'apollo-server-fastify',
        identifier: 'gql',
      },
      {
        name: ' apollo-server-lambda',
        identifier: 'gql',
      },
      {
        name: 'apollo-server-micro',
        identifier: 'gql',
      },
      {
        name: 'apollo-server-azure-functions',
        identifier: 'gql',
      },
      {
        name: 'apollo-server-cloud-functions',
        identifier: 'gql',
      },
      {
        name: 'apollo-server-cloudflare',
        identifier: 'gql',
      },
    ];
  }
  

License

MIT