Named Query

Below defines a query named getUser.

query getUser {
  user(id: "1") {
    id
    name
  }
}

Convention

export const anyVariableName = gql`
  // query name
  query queryNameHasToBeUnique(){
    // graphql entrypoint
    canBeDuplicatedInMultiplePlaces(id: "1") {
      id
      name
    }
  }
`;

Query name (client query name) does not have to match graph entrypoints (server query entrypoints) that make up the query.

gql

gql() is a function that parses GraphQL query strings into an abstract syntax tree.

Result can be used by GraphQL clients.

template literal tag

gql'template_strings' syntax is a template literal tag.

• Template literal tag allows you to call a function (gql in this case) with a template literal as its argument.

(See /javascript/built-in/template-literal.md for more information).

import { gql } from "@apollo/client";

const query = gql(`query getUser($id: ID!) { user(id: $id) { id name } }`);

// same as:
const GET_USER = gql`
  query getUser($id: ID!) {
    user(id: $id) {
      id
      name
    }
  }
`;