GraphQL Tag

import gql from "graphql-tag";

const gql = require("graphql-tag");

import { 
  gql, 
  resetCaches, 
  disableFragmentWarnings,
  enableExperimentalFragmentVariables,
  disableExperimentalFragmentVariables 
} from "graphql-tag";

import gql from "graphql-tag";

// Basic query parsing
const query = gql`
  {
    user(id: 5) {
      firstName
      lastName
    }
  }
`;

// Fragment definition
const userFragment = gql`
  fragment User_user on User {
    firstName
    lastName
  }
`;

// Query with fragment composition
const queryWithFragment = gql`
  {
    user(id: 5) {
      ...User_user
    }
  }
  ${userFragment}
`;

/**
 * Parses GraphQL query strings into DocumentNode AST
 * @param literals - Template literal strings or single query string
 * @param args - Template literal arguments for fragment interpolation  
 * @returns Parsed GraphQL DocumentNode
 */
function gql(
  literals: string | readonly string[],
  ...args: any[]
): DocumentNode;

// Template literal tag usage
const query = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      name
      email
    }
  }
`;

// Function call usage  
const query = gql("{ user { name } }");

// Fragment interpolation
const userFields = gql`
  fragment UserFields on User {
    id
    name
    email
  }
`;

const query = gql`
  query GetUsers {
    users {
      ...UserFields
    }
  }
  ${userFields}
`;

/**
 * Clears the internal document cache and fragment source map
 * Useful for testing or memory management
 */
function resetCaches(): void;

import { resetCaches } from "graphql-tag";

// Clear cache during tests
beforeEach(() => {
  resetCaches();
});

/**
 * Disables console warnings for duplicate fragment names
 * Recommended for production builds
 */
function disableFragmentWarnings(): void;

import { disableFragmentWarnings } from "graphql-tag";

// Disable warnings in production
if (process.env.NODE_ENV === 'production') {
  disableFragmentWarnings();
}

/**
 * Enables experimental support for parameterized fragments
 * Allows fragments to accept variables like operations
 */
function enableExperimentalFragmentVariables(): void;

/**
 * Disables experimental fragment variables support
 * Returns to standard GraphQL fragment behavior
 */
function disableExperimentalFragmentVariables(): void;

import { enableExperimentalFragmentVariables, gql } from "graphql-tag";

// Enable experimental feature
enableExperimentalFragmentVariables();

// Use parameterized fragment
const fragment = gql`
  fragment UserInfo($includeEmail: Boolean!) on User {
    name
    email @include(if: $includeEmail)
  }
`;

/**
 * Webpack loader configuration for .graphql/.gql files
 * Processes GraphQL files into JavaScript modules with parsed AST
 */
module.exports = {
  module: {
    rules: [
      {
        test: /\.(graphql|gql)$/,
        exclude: /node_modules/,
        loader: 'graphql-tag/loader'
      }
    ]
  }
};

// Import .graphql files as parsed DocumentNode
import MyQuery from './queries/MyQuery.graphql';

// Import named queries/fragments from single file
import { GetUsers, UserFragment } from './queries/users.graphql';

# users.graphql
query GetUsers {
  users {
    ...UserFragment
  }
}

fragment UserFragment on User {
  id
  name
  email
}

/**
 * GraphQL DocumentNode representing parsed query/mutation/fragment
 * From the graphql package - standard GraphQL AST format
 */
interface DocumentNode {
  readonly kind: "Document";
  readonly definitions: ReadonlyArray<DefinitionNode>;
  readonly loc?: Location;
}

/**
 * Individual definition within a GraphQL document
 * Can be OperationDefinition or FragmentDefinition
 */
interface DefinitionNode {
  readonly kind: string;
  readonly loc?: Location;
}

/**
 * Location information for AST nodes
 * Contains source text and position details
 */
interface Location {
  readonly start: number;
  readonly end: number;
  readonly source: Source;
}

/**
 * Source text information from GraphQL parsing
 * Contains original GraphQL source and metadata
 */
interface Source {
  readonly body: string;
  readonly name?: string;
  readonly locationOffset: {
    readonly line: number;
    readonly column: number;
  };
}