Forem: Drago

Comprehensive guide to GraphQL clients, part 3

Drago — Sun, 17 Apr 2022 05:17:20 +0000

React-Relay

Relay is a GraphQL client which is built by Facebook. It is a great GraphQL client, but it is not a good choice for simple applications and beginners. It is highly opinionated, users must follow the strict rules.
The main thing here is that the error possibility is minimal. Contrary to other clients it misses a lot of flexibility. Relay demands a lot of knowledge about the application and schema design.
The shiny point is that it is awesome for scalability. Relay is a complete framework for declarative data fetching.
To be able to use Relay, one must create a GraphQL server compatible with Relay.
Many developers avoid using Relay and instead use Apollo Client for complex applications, due to its simplicity and flexibility. It is hard to set up compared to other frameworks, but when everything is done, it is less error-prone and can be used in production serving a lot of users.
The big advantage of React Relay is that it is supported by Facebook and is tested by millions of users on their social networks. In the new release of React18, the Suspense feature is deeply integrated with Relay. So, if you are using React for your application, with Relay you can get a great performance boost.

From the official documentation:

Relay is composed of three core parts:

Relay Compiler: A GraphQL to GraphQL optimizing compiler, providing general utilities for transforming and optimizing queries as well as generating build artifacts. A novel feature of the compiler is that it facilitates experimentation with new GraphQL features - in the form of custom directives - by making it easy to translate code using these directives into standard, spec-compliant GraphQL.

Relay Runtime: A full-featured, high-performance GraphQL runtime that can be used to build higher-level client APIs. The runtime features a normalized object cache, optimized "write" and "read" operations, a generic abstraction for incrementally fetching field data (such as for pagination), garbage collection for removing unreferenced cache entries, optimistic mutations with arbitrary logic, support for building subscriptions and live queries, and more.

React/Relay: A high-level product API that integrates the Relay Runtime with React. This is the primary public interface to Relay for most product developers, featuring APIs to fetch the data for a query or define data dependencies for reusable components (e.g. useFragment).

Installation:
For some reason, I have got an error when using the npm package manager. So I'm using yarn instead.

yarn add relay-runtime react-relay
yarn add --dev relay-compiler babel-plugin-relay

Add schema.graphql to your project:

cd my-project
curl https://raw.githubusercontent.com/ogurenko/graphql-api/main/schema.graphql > schema.graphql

Modify package.json to run relay compiler:

"scripts": {
 "start": "yarn run relay && react-scripts start",
 "build": "yarn run relay && react-scripts build",
 "relay": "yarn run relay-compiler"
 },
 "relay": {
 "src": "./src/",
 "schema": "./schema.graphql"
 },
 ...

Now you can run the app:

yarn start

You should see your app running.
Now it is time to configure the Relay environment. Create a file called RelayEnvironment.js in src/ and add the following code:

import { Environment, Network, RecordSource, Store } from "relay-runtime";
import FetchedData from "./FetchData";


export default new Environment({
 network: Network.create(() => FetchedData()),
 store: new Store(new RecordSource()),
});

Add FetchData.js to src/ and add the following code:

async function FetchedData() {

 const response = await fetch("https://countries.trevorblades.com/", {
 method: "POST",
 headers: {
 "Content-Type": "application/json",
 },
 body: JSON.stringify({
 query: "{countries { name }}",
 }),
 });

 return await response.json();
}

export default FetchedData;

Replace the contents of src/App.js with the following code:

import React from "react";
import graphql from "babel-plugin-relay/macro";
import {
 RelayEnvironmentProvider,
 loadQuery,
 usePreloadedQuery,
} from "react-relay/hooks";
import RelayEnvironment from "./RelayEnvironment";

const { Suspense } = React;


const countriesQuery = graphql`
 query AppCountryNamesQuery {
 countries {
 name
 }
 }
`;


const preloadedQuery = loadQuery(RelayEnvironment, countriesQuery, {
 /* query variables */
});

function App(props) {
 const data = usePreloadedQuery(countriesQuery, props.preloadedQuery);
console.log(data.countries);
 const countriesName = [];
 data.countries.map((c) => countriesName.push(c.name));
 return (
 <div className="App">
 <header className="App-header">
 {countriesName?.map((c, index) => <ul key={index}>{c}</ul>)}
 </header>
 </div>
 );
}

function AppRoot() {
 return (
 <RelayEnvironmentProvider environment={RelayEnvironment}>
 <Suspense fallback={"Loading..."}>
 <App preloadedQuery={preloadedQuery} />
 </Suspense>
 </RelayEnvironmentProvider>
 );
}

export default AppRoot;

Modify src/index.js to run the app with the latest version of React:

import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const root = createRoot(document.getElementById("root"));

root.render(
 <React.StrictMode>
 <App />
 </React.StrictMode>
);

You're done!

Note: To find out more about the environment and particular hooks in the Relay system, please refer to the official documentation

Apollo Client

At the end of this comprehensive guide, you will learn how to use Apollo Client to fetch data from a GraphQL server.
Apollo is a gold standard between the GraphQL ecosystem and React. It's simple, powerful, and flexible. It has a lot of features for modern applications. The downside is the bigger size of the library. It is not convenient to use this "mega" library for a simple application.
Apollo is a platform-agnostic client. It can be used with any framework on the client-side, as well as with vanilla JavaScript. Works well with TypeScript and serverless architectures. Works well with Node.js and supports many libraries.

Installation:

npm install @apollo/client graphql

Create a client:

App.js:

import React from 'react'
import { ApolloProvider, ApolloClient, InMemoryCache } from "@apollo/client";
import { FetchedData } from "./FetchData";

const client = new ApolloClient({
 uri: "https://countries.trevorblades.com",
 cache: new InMemoryCache()
});

export default function App() {
 return (
 <ApolloProvider client={client}>
 <FetchedData />
 </ApolloProvider>
 );
}

FetchData.js:

import React from "react";
import { useQuery, gql } from "@apollo/client";

const countriesQuery = gql`
 query {
 countries {
 name
 }
 }
`;

export const FetchedData = () => {
 const { loading, error, data } = useQuery(countriesQuery);

 if (loading) return <p>Loading ... </p>;
 if (error) return <p>Erorr ... </p>;

 const countriesList = data.countries.map((country, index) => (
 <ul key={index}>{country.name}</ul>
 ));
 return (
 <>
 <h1>Countries</h1>
 {countriesList}
 </>
 );
};

Start the app:

npm start

As you can see, Apollo Client leverages the power of React Context and Hooks. Additionally resolves the problems with caching, state management, and error handling.

Bundle size and popularity of the GraphQL clients:

	graphql-request	graphql-hooks	urql	React-Relay	apollo-client
Size
Stars
Forks
Issues
Downloads

red flag: the worst result among all the clients
green flag: the best result among all the clients
Size: source Bundlephobia (mini zipped size of the bundle)
Stars & Issues & Forks: source Github
Downloads: source NPM

The table above shows that GraphQL-request and urql are overall the most balanced libraries. There are no extreme results in any of these two clients.
Apollo-client is the most popular client in the community. On the other hand, it has the most issues.
GraphQL-hooks is the least popular client in the community. That's not suggesting that is the bad solution for your application.
GraphQL-request is the most downloaded client, so it speaks for itself.

Conclusion

Axios, React-Query, and SWR are great tools for any protocol and can be used to build a GraphQL client. My focus is on the protocol-specific GraphQL clients.
The GraphQL clients presented in this post, are all pretty solid and have a lot of good features. You can find a lot of comparison tables and examples of how to use the GraphQL clients on the internet. But this post aims to show you practical examples, with the same query and different GraphQL clients. I think that the best way to learn is to try it out on the same workload and see how it works.

Opinionated recommendations:

For the sake of simplicity, I recommend using graphql-request. It is a simple, fast, and small library that is easy to use.
If you need data on many pages, across different components, you can use graphql-hooks, which uses React Context and Hooks.
If you are looking for a GraphQL client that is more powerful, I recommend using urql. Although it is less popular than Apollo Client, it has a lot of good features. Great post about it: I Switched From Apollo To Urql (And It Was Worth It)
If you need an enterprise solution, you can use react-relay. The learning curve is a bit more complex, but once you set up the environment, your app is less likely to break.

Thanks for reading!

References:

5 GraphQL clients for JavaScript and Node.js

Axios vs. fetch(): Which is best for making HTTP requests?

Urql

React-Query

Comprehensive guide to GraphQL clients, part 2

Drago — Tue, 12 Apr 2022 11:06:21 +0000

Urql

The official repository says that Urql is:

The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.

Urql is an advanced GraphlQL client which has options for caching, normalization, and more. In modern development, it is a must-have, especially if you are building a complex application.

Installation:

npm install urql graphql

App.js:

import React from 'react';
import FetchedData from './FetchData';
import { createClient, Provider } from 'urql';

const client = createClient({
 url: 'https://countries.trevorblades.com/',
});

export default function App() {
 return (
 <Provider value={client}>
 <FetchedData />
 </Provider>
 );
}

FetchData.js:

import React from "react";
import { useQuery } from "urql";
const countriesQuery = `
query {
 countries {
 name
 }
}
`;

const FetchedData = () => {
 const [result] = useQuery({ query: countriesQuery });

 const { data, fetching, error } = result;
 console.log(data);

 if (fetching) return <p>Loading...</p>;
 if (error) return <p>Error: {error.message}</p>;

 const countriesList = data.countries.map((country, i) => (
 <ul key={i}>{country.name}</ul>
 ));

 return (
 <div>
 <h1>Countries</h1>
 {countriesList}
 </div>
 );
};

export default FetchedData;

SWR

The simple and effective way to fetch data is to use the SWR library.

Install SWR:

npm install swr

First, you need to import the library and create a fetcher function. For using SWR with GraphQL, you create a custom fetcher function with libraries like graphql-request or graphql-hooks.

FetchData.js:

import { request } from "graphql-request";
import useSWR from "swr";

const FetchedData = () => {
 const countriesQuery = `
 query {
 countries {
 name
 }
 }
 `;

 const url = "https://countries.trevorblades.com/";

 const fetcher = () => request(url, countriesQuery);

 const { data, error } = useSWR(countriesQuery, fetcher);

 if (error) return <div>failed to load</div>;
 if (!data) return <div>loading...</div>;

 const countriesList = data?.countries.map((c, i) => <ul key={i}>{c.name}</ul>);

 return (
 <>
 <h1>Countries</h1>
 {countriesList}
 </>
 );
};

export default FetchedData;

App.js:

import FetchedData from "./FetchData";

export default function App() {
return (
 <FetchedData />
);
}

As simple as that. As you can see, using SWR with GraphQL is straightforward. You avoid the need to create a state management system, all logic is in the useSWR hook.

React Query

As official documentation says:

Because React Query's fetching mechanisms are agnostically built on Promises, you can use React Query with literally any asynchronous data fetching client, including GraphQL!

React Query is very similar to SWR, but it is built on top of React Context and React Hooks.
Install React Query:

npm install react-query

FetchData.js:

import { request } from "graphql-request";
import { useQuery } from "react-query";

const FetchedData = () => {
 const countriesQuery = `
 query {
 countries {
 name
 }
 }
 `;

 const url = "https://countries.trevorblades.com/";

 const fetcher = () => request(url, countriesQuery);

 const { isLoading, error, data } = useQuery(url, fetcher);

 if (error) return <div>failed to load</div>;
 if (isLoading) return <div>loading...</div>;

 const countriesList = data?.countries.map((c, i) => <ul key={i}>{c.name}</ul>);

 return (
 <>
 <h1>Countries</h1>
 {countriesList}
 </>
 );
};

export default FetchedData;

App.js:

import FetchedData from "./FetchData";
import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

export default function App() {
return (
 <QueryClientProvider client={queryClient}>
 <FetchedData />
 </QueryClientProvider>
);
}

Hopefully, you'll find an "ideal" client for your app and that this post added positive thoughts in that manner.

Comprehensive Guide to GraphQL Clients, part 1

Drago — Sat, 09 Apr 2022 10:16:19 +0000

Introduction

As you already know, GraphQL is a query language for APIs. It is a declarative language, which means that it is easy to write queries. However, it is also a flexible language, which means that it is easy to write queries that are not declarative. This guide will help you to write declarative queries. Until now, you have created a server that returns data. However, you have not used the data in any way. This guide will help you to use the data in a declarative way.
GraphQL clients are used to sending queries to a GraphQL server. Requests are sent in the form of a query string. The response is returned in the form of a JSON object. The response is a JSON object that contains the data that is requested. A request is made to a GraphQL server using the HTTP protocol, so you can use the same client as a client for RESTful APIs.

Getting Started

GraphQL IDE's

IDEs are test tools to check the correctness of your queries. You can define your queries in the IDE and then send them to the server. The server will return the data that is requested if the query is correct. There are a lot of IDEs available.
The most popular and the simplest IDE for GraphQL queries is GraphiQL.
The modern clone of GraphiQL is GraphQL Playground. The environment is cleaner and has some advanced features.
The recent IDE for GraphQL queries is Apollo Explorer.
All-around tools such as Postman and Insomnia are great tools for testing either GraphQL queries or RESTful APIs.

Curl

The tool for quickly sending queries to a GraphQL server is curl. It is a command-line tool that allows you to send simple queries to a GraphQL server.

curl  -X POST -H "Content-Type: application/json" -d '{"query": "{countries { name }}"}' 'https://countries.trevorblades.com/'

It is useful for debugging and quick testing.

Install ReactJS

The first step is to install ReactJS as our library of choice for creating UI components.
If you have not installed ReactJS, you can install it using the following command in the command line:

npx create-react-app my-app
cd my-app
npm start

Now you are ready to deep dive into the GraphQL world.

Native Fetch

Fetch is a native built-in JavaScript client for making HTTP requests. Let's see how to use fetch to send a query to a GraphQL server.

Create a file FetchData.js in the root of your project.

import { useState, useEffect } from "react";

const FetchedData = () => {
  const [country, setCountry] = useState();
  const fetchData = async (req, res) => {
    try {
      const response = await fetch("https://countries.trevorblades.com/", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          query: "{countries { name }}",
        }),
      });
      const { data } = await response.json();

      const countriesName = [];
      data.countries.map((c) => countriesName.push(c.name));
      setCountry(countriesName);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);
  const countriesList = country?.map((c, index) => <ul key={index}>{c}</ul>);
  return (
    <>
      <h1>Countries</h1>
      {countriesList}
    </>
  );
};

export default FetchedData;

Then in App.js, you can use the component FetchedData.

import FetchedData from "./FetchData";

export default function App() {
return <FetchedData />;
}

Axios

Axios is a JavaScript library for making HTTP requests. It is a wrapper around the XMLHttpRequest object. It's a promise-based HTTP client for the browser and node.js.
Axios automatically parses JSON responses. It is a shorthand for fetch.
Install Axios using the following command in the command line:

npm install axios

FetchData.js

import { useState, useEffect } from "react";
import axios from "axios";

const FetchedData = () => {
  const [country, setCountry] = useState();
  const fetchData = async (req, res) => {
    try {
      const response = await axios.post("https://countries.trevorblades.com/", {
        query: " {countries { name }}"
      });

      const { data } = response.data;

      const countriesName = [];
      data.countries.map((c) => countriesName.push(c.name));
      setCountry(countriesName);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);
  const countriesList = country?.map((c, index) => <ul key={index}>{c}</ul>);
  return (
    <>
      <h1>Countries</h1>
      {countriesList}
    </>
  );
};

export default FetchedData;

App.js is the same as before.

graphql-request

For simple requests, graphql-request is a good choice. This library is only '5.2kb' and it is one of the fastest and lightest GraphQL clients. It supports async/await, typescript, isomorphism, and works on both the client and server sides.

Install graphql-request:

npm install graphql-request graphql

Then, you need to import the library and create a client.
If you are not familiar with the code in these examples, I recommend you to read the documentation about the fundamentals of React.

FetchData.js

import { useState, useEffect, useCallback } from "react";
import { request, gql } from "graphql-request";

const FetchedData = () => {
  const [country, setCountry] = useState();

  const countriesQuery = gql`
    query {
      countries {
        name
      }
    }
  `;

  const url = "https://countries.trevorblades.com/";

  const fetchData = useCallback(async () => {
    try {
      const response = await request(url, countriesQuery);

      const { countries } = response;

      const countryName = countries?.map((c, i) => <ul key={i}>{c.name}</ul>);
      setCountry(countryName);
    } catch (error) {
      console.log(error);
    }
  }, [countriesQuery]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  return (
    <>
      <h1>Countries</h1>
      {country}
    </>
  );
};

export default FetchedData;

App.js is the same as in the previous example.

graphql-hooks

Graphql-hooks is a library that allows you to use GraphQL clients in React. It is a promise-based library for the browser and node.js. Conceptually, it is similar to graphql-request, but the difference is that first is formed a client and then the whole app is wrapped in a context in which the client is available(wrapping app). Tiny bundle: only 7.6kB (2.8 gzipped)

Install graphql-hooks:

npm install graphql-hooks

App.js

import FetchedData from "./FetchData";
import { GraphQLClient, ClientContext } from "graphql-hooks";

const client = new GraphQLClient({
  url: "https://countries.trevorblades.com/"
});

export default function App() {
  return (
      <ClientContext.Provider value={client}>
        <FetchedData />
      </ClientContext.Provider>
  );
}

FetchData.js

import { useState, useEffect, useCallback } from "react";
import { useQuery } from "graphql-hooks";

const FetchedData = () => {
  const [country, setCountry] = useState();

  const countriesQuery = `
    query {
      countries {
        name
      }
    }
  `;

  const { loading, error, data } = useQuery(countriesQuery);

  const fetchData = useCallback(async () => {
    try {

      const { countries } = data;
      console.log(countries);


      const countryName = countries?.map((c, i) => <ul key={i}>{c.name}</ul>)
      setCountry(countryName);
    } catch (error) {
      console.log(error);
    }
  }, [data]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <>
      <h1>Countries</h1>
      {country}
    </>
  );
};

export default FetchedData;

If you don't need advanced features, graphql-hooks is an ideal choice, because it is very functional and easy to use. It is also very lightweight. Even has a self-contained development environment in form of extension.

GraphQL Subscription

Drago — Sat, 08 Jan 2022 15:43:18 +0000

Introduction to GraphQL Subscription

Finally, we will learn how to use GraphQL Subscription to get real-time updates from the server.
The GraphQL Subscription is a way to get real-time updates from the server. It's used the WebSocket protocol, instead of HTTP, because it's more efficient, two-way communication. The server sends updates to the client, and the client sends updates to the server. Subscription means that the client is not required to send a request to the server every time it wants to get an update. The connection between the client and the server is maintained by the server, using the WebSocket API protocol.
For implementing GraphQL Subscription, we will use the subscription-transport-ws library.
There are many examples in practical projects, but the most popular are: google maps, real-time flight tracking, autonomous vehicles, chat applications, vehicle location, seat reservations, ticket reservations, etc.

Implementing GraphQL Subscription

Create a new project and add the following dependencies:

npm install express express-graphql graphql-playground-middleware-express graphql-subscriptions subscriptions-transport-ws ws

or use yarn:

yarn add express express-graphql graphql-playground-middleware-express graphql-subscriptions subscriptions-transport-ws ws

A useful tool for developing purposes is nodemon, which automatically restarts the server when the code changes.

npm install -D nodemon
// or
yarn add -D nodemon

Creating a server

Creating a server begins with creating a new schema. The schema is a collection of GraphQL types, which are used to define the data that the server can return. Let's say we have a collection of posts, and we want to follow published posts in real-time, using GraphQL Subscription.

Note: To use ES6 syntax you must provide the "type" : "module" property in package.json.

Types

Let's define the type of post. Create a folder called types in the root of the project. Create a file called post.js in the types folder.

post.js

import {
  GraphQLID,
  GraphQLNonNull,
  GraphQLObjectType,
  GraphQLString,
} from "graphql";

export const PostType = new GraphQLObjectType({
  name: "Post",
  fields: () => ({
    id: {
      type: new GraphQLNonNull(GraphQLID),
    },
    title: {
      type: new GraphQLNonNull(GraphQLString),
    },
    content: {
      type: new GraphQLNonNull(GraphQLString),
    },
  }),
});


export const PostSubscription = new GraphQLObjectType({
  name: "PostSubscription",
  fields: () => ({
    id: {type: new GraphQLNonNull(GraphQLID)},
    title: {type: new GraphQLNonNull(GraphQLString)},
    content: {type: new GraphQLNonNull(GraphQLString)},
  }),
});

Let's define a query type, which is used to get the post, in the same folder.

query.js

import {
  GraphQLID,
  GraphQLObjectType,
  GraphQLList,
} from "graphql";
import { PostType } from "./post.js";
import { getPost, getPosts } from "../resolvers/resolvers.js";


const Query = new GraphQLObjectType({
  name: "Query",
  fields: () => ({
    post: {
      type: PostType,
      args: {
        id: {
          type: GraphQLID,
        },
      },
      resolve: (parent, args) => getPost(args.id),
    },
    posts: {
      type: new GraphQLList(PostType),
      resolve: () => getPosts(),
    },
  }),
});


export default Query;

We defined the PostType and the Query type. The PostType is used to define the data that the server can return. The Query type is used to define the data that the client can request. Also, we defined the PostSubscription type, which is used to define the data that the client can subscribe to. The resolvers are defined in the resolvers.js file, for better usability and separation of concerns.

Let's create a mutation type, which is used to create, update and delete a new post, in the same folder.

mutation.js

import {
  GraphQLID,
  GraphQLNonNull,
  GraphQLObjectType,
} from "graphql";
import { addPost, updatePost, deletePost } from "../resolvers/resolvers.js";
import { PostType } from "./post.js";
import { InputPostType } from "./inputPost.js";


const Mutation = new GraphQLObjectType({
  name: "Mutation",
  fields: () => ({
    addPost: {
      type: new GraphQLNonNull(PostType),
      args: {
        input: {
          type: new GraphQLNonNull(InputPostType),
        },
      },
      resolve: async (parent, args, {pubsub}) => {
          const {title, content} = args.input;

          return addPost(title, content, pubsub);
      }
    },
    updatePost: {
      type: PostType,
      args: {
        input: {
          type: new GraphQLNonNull(InputPostType),
        },
      },
      resolve: async (parent, , {pubsub}) => {
            const {id, title, content} = args.input;

            return updatePost(id, title, content, pubsub);
      },
    },
    deletePost: {
      type: new GraphQLNonNull(PostType),
      args: {
        id: {
          type: new GraphQLNonNull(GraphQLID),
        },
      },
      resolve: (parent, args, {pubsub}) => {
          const { id } = args;
          return deletePost(id, pubsub);
      },
    },
  }),
});


export default Mutation;

Arguments are defined in the InputPost type. The InputPost is used to define the data that the client can send to the server. Arguably, the InputPost is not necessary, but it's good practice to define the data that the client can send to the server.

inputPost.js

import {
  GraphQLID,
  GraphQLNonNull,
  GraphQLInputObjectType,
  GraphQLString,
} from "graphql";


export const InputPostType = new GraphQLInputObjectType({
  name: "InputPost",
  fields: () => ({
    id: {
      type: new GraphQLNonNull(GraphQLID),
    },
    title: {
      type: new GraphQLNonNull(GraphQLString),
    },
    content: {
      type: new GraphQLNonNull(GraphQLString),
    },
  }),
});

And finally, we can create a subscription type, which is used to subscribe to the post.

subscription.js

import { GraphQLNonNull, GraphQLObjectType } from "graphql";
import { PostSubscription } from "./post.js";


const Subscription = new GraphQLObjectType({
  name: "Subscription",
  fields: () => ({
    post_added: {
      type: new GraphQLNonNull(PostSubscription),
      subscribe: (parent, args, {pubsub}) => pubsub.asyncIterator("NEW_POST"),
      },
    post_updated: {
        type: new GraphQLNonNull(PostSubscription),
        subscribe: (parent, args, {pubsub}) => pubsub.asyncIterator("POST_UPDATED"),
      },
    post_deleted: {
            type: new GraphQLNonNull(PostSubscription),
            subscribe: (parent, args, {pubsub}) => pubsub.asyncIterator("POST_DELETED"),
        },
    },
  }),
});


export default Subscription;

Resolvers

Resolvers are defined in the resolvers.js file.

resolvers.js

import { posts } from "../data/posts.js";

// Queries
export const getPosts = () => posts;

export const getPost = (id) => {
  if (id < posts.length) {
    return posts[id - 1];
  }
};


// Mutations
export const addPost = async (title, content, pubsub) => {
  const id = posts.length + 1;
  const newPost = {id, title, content};
  posts.push(newPost);
  await pubsub.publish("NEW_POST", {post_added: newPost});
  return newPost;
};

export const updatePost = async (id, title, content, pubsub) => {
  const post = posts.find(post => post.id === parseInt(id));

  if (post) {
    post.title = title;
    post.content = content;
  }
  await pubsub.publish("POST_UPDATED", {post_updated: post});
  return post;
};


export const deletePost = async (id, pubsub) => {
  const post = posts.find(post => post.id === parseInt(id));

  if (!post) {
      throw new Error("Post not found");
  }
    posts.splice(posts.indexOf(post), 1);

  await pubsub.publish("POST_DELETED", {post_deleted: post});
  return post;
};

Data is defined in the data.js file. You can find the data in the Github repository.
Pubsub is a feature that publishes events to which clients can subscribe. Each of these events has a name, which is used to subscribe to the event (NEW_POST, POST_UPDATED, POST_DELETED). Based on the name, the asyncIterator method of the pubsub object is called and sends the event to the client. In the end, it remains to create a server to implement the subscription.

Server

index.js

import { GraphQLSchema, execute, subscribe } from "graphql";
import { WebSocketServer } from "ws";
import express from "express";
import { graphqlHTTP } from "express-graphql";
import { PubSub } from "graphql-subscriptions";
import Query from "./types/query.js";
import Mutation from "./types/mutation.js";
import Subscription from "./types/subscription.js";
import expressPlayground from "graphql-playground-middleware-express";
import { SubscriptionServer } from "subscriptions-transport-ws";

const app = express();
const pubsub = new PubSub();
const graphQLPlayground = expressPlayground.default;

// define the GraphQL schema
const schema = new GraphQLSchema({
  query: Query,
  mutation: Mutation,
  subscription: Subscription,
});


ap.use("/graphql", graphqlHTTP({
  schema,
  context: { pubsub },
}));

app.use("/playground", graphQLPlayground({
  endpoint: "/graphql",
  subscriptionEndpoint: `/graphql`,
}));


const server = app.listen(4000, () => {

const wss = new WebSocketServer({
    server,
    path: "/graphql",
});

SubscriptionServer.create(
    {
        schema,
        execute,
        subscribe,
        onConnect: () => {
           return { pubsub }
        },
    },
    wss,
);



  console.log("Server is running on http://localhost:4000");
});

Finally, open the browser and go to http://localhost:4000/playground. Enter the fields relevant to the Subscription type and click on the Run button. Event listening will be started.

Then, open another tab and create a post. The post will be added to the list of posts. the event will be published and should appear in the Subscription tab. This way, you can listen to the update and delete events, as well as the creation of a new post.

The complete code can be seen in the Github repository Link.