Introduction to GraphQL-tag

GraphQL-tag is a powerful library that allows developers to parse GraphQL queries. This post provides an extensive guide on how to use GraphQL-tag, showcasing its various APIs through practical examples. The primary focus is to help developers understand and efficiently use GraphQL-tag in their projects.

Installation

npm install graphql-tag

Usage

GraphQL-tag primarily provides a function that parses GraphQL query strings into the standard GraphQL AST (Abstract Syntax Tree).

Basic Example

import gql from 'graphql-tag';

const query = gql`
  {
    user(id: 1) {
      name
      age
    }
  }
`;

Using with Apollo Client

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://example.com/graphql',
  cache: new InMemoryCache()
});

client
  .query({
    query: gql`
      {
        user(id: 1) {
          name
          age
        }
      }
    `
  })
  .then(result => console.log(result));

Defining Fragments

const userFragment = gql`
  fragment UserDetails on User {
    name
    age
    email
  }
`;

const query = gql`
  {
    user(id: 1) {
      ...UserDetails
    }
  }
  ${userFragment}
`;

Attaching Variables

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

client
  .query({
    query,
    variables: { id: 1 }
  })
  .then(result => console.log(result));

Mutations

const mutation = gql`
  mutation UpdateUser($id: ID!, $name: String!) {
    updateUser(id: $id, name: $name) {
      id
      name
      age
    }
  }
`;

client
  .mutate({
    mutation,
    variables: { id: 1, name: "New Name" }
  })
  .then(result => console.log(result));

Subscriptions

import { WebSocketLink } from '@apollo/client/link/ws';
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

const wsLink = new WebSocketLink({
  uri: `wss://example.com/graphql`,
  options: {
    reconnect: true
  }
});

const client = new ApolloClient({
  link: wsLink,
  cache: new InMemoryCache()
});

const subscription = gql`
  subscription onUserUpdated($id: ID!) {
    userUpdated(id: $id) {
      id
      name
      age
    }
  }
`;

client
  .subscribe({
    query: subscription,
    variables: { id: 1 }
  })
  .subscribe({
    next(data) {
      console.log(data);
    }
  });

Complete App Example

Here is a simple app example using multiple GraphQL-tag functionalities:

import React from 'react';
import { ApolloProvider, ApolloClient, InMemoryCache, gql, useQuery } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://example.com/graphql',
  cache: new InMemoryCache()
});

const USER_QUERY = gql`
  {
    user(id: 1) {
      id
      name
      age
    }
  }
`;

const UserComponent = () => {
  const { data, loading, error } = useQuery(USER_QUERY);

  if (loading) return 
Loading...
;
  if (error) return 
Error: {error.message}
;

  return (
    

      
User Information
      
ID: {data.user.id}
      
Name: {data.user.name}
      
Age: {data.user.age}
    
  );
};

const App = () => (
  
    

      
My GraphQL App
      
    
  
);

export default App;

By following the examples above, you can seamlessly integrate GraphQL-tag into your JavaScript applications and efficiently manage your GraphQL queries, mutations, and subscriptions.

Hash: ad79330a03568e0cafa21481f299cbfc3b2bfa00d335bbd102e11781266299fb