Docs
GraphQL Tag Pluck

Extracting GraphQL Definitions from Code Files

@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 (opens in a new tab).

Usage

npm i @graphql-tools/graphql-tag-pluck

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

import { gqlPluckFromCodeStringSync, gqlPluckFromCodeString } from '@graphql-tools/graphql-tag-pluck'
 
// Returns promise
gqlPluckFromCodeString(
  filePath, // this parameter is required to detect file type
  fs.readFileSync(filePath, 'utf8')
)
 
// Returns string
gqlPluckFromCodeStringSync(filePath, fs.readFileSync(filePath, 'utf8'))

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

const MessageType = /* GraphQL */ `
  enum MessageType {
    text
    media
    draftjs
  }
`

Supported file extensions are:

  • .js
  • .jsx
  • .ts
  • .tsx
  • .flow
  • .flow.js
  • .flow.jsx
  • .graphqls
  • .graphql
  • .gqls
  • .gql

Options

It is recommended to look at the source code (opens in a new tab) 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 using 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'
    { identifier: 'graphql', name: 'gatsby' },
    { identifier: 'gql', name: 'apollo-server-express' },
    { identifier: 'gql', name: 'apollo-server' },
    { identifier: 'graphql', name: 'react-relay' },
    { identifier: 'gql', 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' }
  ]
}
Documents LoadingRelay Operation Optimizer