## 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](https://relay.dev/docs/api-reference/relay-environment-provider/)

## 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 | ![][bggr] | ![][bggh] | ![][bgurql] | ![][bgrr] | ![][bgac] |
| Stars | ![][gitstarsgr] | ![][gitstarsgh] | ![][gitstarsurql] | ![][gitstarsrr] | ![][gitstarsac] |
| Forks | ![][forkgr] | ![][forkgh] | ![][forkurql] | ![][forkrr] | ![][forkac] |
| Issues | ![][issuesgr] | ![][issuesgh] | ![][issuesurql] | ![][issuesrr] | ![][issuesac] |
| Downloads | ![][wdowngr] | ![][wdowngh] | ![][wdownurql] | ![][wdownrr] | ![][wdownac] |

- **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.



[graphql-request]: https://github.com/prisma-labs/graphql-request
[gitstarsgr]: https://badgen.net/github/stars/prisma-labs/graphql-request?label=
[bggr]: https://badgen.net/bundlephobia/minzip/graphql-request?&label=
[issuesgr]: https://badgen.net/github/issues/prisma-labs/graphql-request?label=
[wdowngr]: https://badgen.net/npm/dw/graphql-request?label=&color=green
[forkgr]: https://badgen.net/github/forks/prisma-labs/graphql-request?label=



[graphql-hooks]: https://github.com/nearform/graphql-hooks
[gitstarsgh]: https://badgen.net/github/stars/nearform/graphql-hooks?label=&color=red
[bggh]: https://badgen.net/bundlephobia/minzip/graphql-hooks?color=green&label=
[issuesgh]: https://badgen.net/github/issues/nearform/graphql-hooks?label=&color=green
[wdowngh]: https://badgen.net/npm/dw/graphql-hooks?label=&color=red
[forkgh]: https://badgen.net/github/forks/nearform/graphql-hooks?label=&color=red



[urql]: https://formidable.com/open-source/urql/
[gitstarsurql]: https://badgen.net/github/stars/FormidableLabs/urql?label=
[bgurql]: https://badgen.net/bundlephobia/minzip/urql?label=
[issuesurql]: https://badgen.net/github/issues/FormidableLabs/urql?label=
[wdownurql]: https://badgen.net/npm/dw/urql?label=&color=blue
[forkurql]: https://badgen.net/github/forks/FormidableLabs/urql?label=



[react-relay]: https://relay.dev/
[bgrr]: https://badgen.net/bundlephobia/minzip/react-relay?color=red&label=
[gitstarsrr]: https://badgen.net/github/stars/facebook/relay?label=
[issuesrr]: https://badgen.net/github/issues/facebook/relay?label=
[wdownrr]: https://badgen.net/npm/dw/react-relay?label=&color=blue
[forkrr]: https://badgen.net/github/forks/facebook/relay?label=



[apollo-client]: https://www.apollographql.com/docs/react/get-started/
[gitstarsac]: https://badgen.net/github/stars/apollographql/apollo-client?label=&color=green
[bgac]: https://badgen.net/bundlephobia/minzip/@apollo/client?label=
[issuesac]: https://badgen.net/github/issues/apollographql/apollo-client?label=&color=red
[wdownac]: https://badgen.net/npm/dw/apollo-client?label=&color=blue
[forkac]: https://badgen.net/github/forks/apollographql/apollo-client?label=&color=green

## 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)](https://javascript.plainenglish.io/how-i-switched-from-apollo-to-urql-in-my-next-js-site-and-why-it-was-worth-it-9c7394ec150d)

- 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
](https://blog.logrocket.com/5-graphql-clients-for-javascript-and-node-js/)

[Axios vs. fetch(): Which is best for making HTTP requests?](https://blog.logrocket.com/axios-vs-fetch-best-http-requests/)

[Urql](https://formidable.com/open-source/urql/docs/comparison/)

[React-Query](https://react-query.tanstack.com/comparison)

In this post, it will be explained how to use the most advanced GraphQL client like Relay and Apollo Client and conclude with a comparison table of the most popular GraphQL clients.

Guide to GraphQL clients, part 3

## 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.

The second part of this series leads to more robust yet, simple solutions. Hopefully, you'll find an "ideal" client for your app(s) ...

Guide to GraphQL clients, part 2

# Comprehensive Guide to GraphQL Clients

## 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](https://github.com/graphql/graphiql).
The modern clone of GraphiQL is [GraphQL Playground](https://www.electronjs.org/apps/graphql-playground). The environment is cleaner and has some advanced features.
The recent IDE for GraphQL queries is [Apollo Explorer](https://studio.apollographql.com/).
All-around tools such as [Postman](https://www.getpostman.com/) and [Insomnia](https://www.insomnia.rest/) are great tools for testing either GraphQL queries or RESTful APIs.

## Curl

The tool for quickly sending queries to a GraphQL server is [curl](https://curl.haxx.se/). 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.

Comprehensive guide to GraphQL clients and additional libraries. Practical examples of data fetching techniques and methods ...

Guide to GraphQL clients, part 1

# GraphQL Subscription

## Introduction to GraphQL Subscription
  <br />


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](https://www.npmjs.com/package/subscriptions-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.
  <br />
  <br />


## Implementing GraphQL Subscription
  <br />


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
```
  <br />

## Creating a server
  <br />

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.

  <br />



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

  <br />


### Types
  <br />

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;
```
  <br />


### Resolvers

  <br />


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.

  <br />


### Server

  <br />


- 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.

![Subscription](https://res.cloudinary.com/dragardelo/image/upload/v1640002054/blog/Subscription_cup8uu.png)


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.

![Subscription_2](https://res.cloudinary.com/dragardelo/image/upload/v1640010441/blog/Subscription_2_elmimj.png)


The complete code can be seen in the Github repository [Link](https://github.com/ogurenko/graphql-api-subscription).

To create real-time applications, GraphQL Subscription offers everything you need to implement it in your application ...

GraphQL Subscription

# GraphQL-options

*Note: The public [GraphQL API](https://countries.trevorblades.com/) is used for this post.*


## Variables

Variables are used to pass data to the server. They are used in the query string and the GraphQL query. They are used to filter the data, to work with GraphQL on dynamics and security.
The procedure to use variables is as follows:
- Create a variable in the GraphQL query.
- Pass the variable in the query string.
- Pass the variable in the GraphQL query.

as in the following example:

```
query variableTest ($ continent: [String]!) {
countries (filter: {continent: {in: $ continent}}) {
name
  languages ​​{
    name
  }
}
}

variables {
    "continent": "EU"
  }
```

  <br />

## Directives

  <br />


The directives are used to describe the behavior of the query or mutation requests. They always start with the `@` symbol. According to the GraphQL specification, they are used in places after the expression `on` and before the `{` symbol.
Directives are an additional option in the GraphQL schema language that defines what should be returned in the response. There are two types of directives:
- operational directives: @include and @skip
- schematic directive: @deprecated

The **@include** directive is used to include the field in the response only if the argument is true.
If the argument is false, the field is not included in the response.

```
query listCountries ($isAuth: Boolean!) {
countries @include (if: $isAuth) {
  name
  capital
  currency
}
}
variables {
  "isAuth": true
}
```
So, if the variable isAuth is true, the field countries are included in the response.

The **@skip** directive is used to exclude the field from the response. If the argument is true, the field is not included in the response.

```
query listCountries ($ isAuth: Boolean!) {
countries @skip (if: $ isAuth) {
  name
  capital
  currency
}
}
variables {
  "isAuth": true
}
```

The **@deprecated** directive is used to mark a field as deprecated and display a warning in the response for obsolete fields, that are not used anymore. This is useful for developers to know which fields are obsolete and which are still in use.

  <br />


## Fragments

  <br />


A fragment is a way to define a reusable piece of a GraphQL query. It is used to define the fields that are common to multiple queries and to avoid repeating the same fields in multiple queries.

```
fragment country on Country {
name
capital
}
```
Now, if we want to use the fragment **country** in a query, we can use the following syntax:

```
query GetCountry {
  countries (filter: {continent: {in: "EU"}}) {
  ... country
}
  }
}
```

This is the same as the following query:

```
query GetCountry {
  countries (filter: {continent: {in: "EU"}}) {
  name
  capital
}
  }
}
```

## Introspection

Introspection is a way to get information about the GraphQL schema. Introspection requests are made using the GraphQL introspection query. It is recognized by two underscores : `__schema`, `__type` and `__typename`.

`__schema` is used to get the list of all the fields, types, and directives in the schema.

```
type __Schema {
  types: [__Type!]!
  queryType: __Type!
  mutationType: __Type
  subscriptionType: __Type
  directives: [__Directive!]!
}
```

as in the following example:

```
query Introspection {
__schema {
  types {
    name
    kind
    description
    fields {
      name
      description
    }
  }
}
```

We can see that the query returns the list of all the types in the schema.

`__type` is used to get information about a specific type.

```
query introspectionTestType {
  __type (name: "Continent") {
    name
    kind
    fields {
      name
    }
  }
}
```


`__typename` is used to get the name of the type of object.

```
query introspectionTestTypeName {
countries {
  name
  __typename
}
}
```


GraphQL has many options to use, but the most common ones are given above. If you want to know more about options, you can read the [GraphQL documentation](https://graphql.org/learn/).


Variables, directives, fragments, introspections can significantly improve the work of both developers and users ...

GraphQL options

# GraphQL Mutations

### Types

  <br />


Mutations are the only way to change data in a GraphQL server. Involves creating a new type, and then adding a mutation field to the schema. Creating, updating, and deleting data is a common use case for mutations. The data format is similar to the data format for queries. Contain the following types:

- **Object:** The type of the object that is being mutated. The object type is the same as the one that is being queried.
- **Root:** The root type of the mutation. 
- **Input:** The input type for the mutation.Is used to validate the mutation.

Let's do a quick example of a mutation.
Create a folder called `graphql-api` at the root of the project. Then create a file called `server.js` in the `graphql-api` folder. Install the necessary packages in the command line:

```
npm install express-graphql graphql
npm install -D nodemon
```

or with `yarn`:

```
yarn add express-graphql graphql
yarn add -D nodemon
```

The full example is available [here](https://github.com/ogurenko/graphql-api-mutation).

ES6 syntax is used in this example, which implies **import** and **export**, instead of the traditional `require` and `module.exports`. To enable ES6 syntax, use the `--experimental-specifier-resolution` flag. In the `package.json` file, add the following properties:

```
  "name": "graphql-api",
  "version": "1.0.0",
  "type": "module",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \" Error: no test specified \ "&& exit 1",
    "start": "nodemon --experimental-specifier-resolution = node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^ 4.17.1",
    "express-graphql": "^ 0.12.0",
    "graphql": "^ 15.5.1",
    "nodemon": "^ 2.0.12"
  }
}
```

In the `server.js` file, add the following code:

```
import express from 'express';
import { graphqlHTTP } from 'express-graphql';
import { GraphQLSchema } from 'graphql';
import RootQueryType from './schema/query.js';
import RootMutationType from './schema/mutation.js';


// Define the schema
const schema = new GraphQLSchema({
  query: RootQueryType,
  mutation: RootMutationType
});



const app = express();

app.use('/graphql', graphqlHTTP({
  schema: schema,
  graphiql: true,
}));

const port = process.env.PORT || 8080;

app.listen(port, () => {
  console.log(`Running a GraphQL API server at http://localhost:${port}/graphql`);
});
```

**graphqlHTTP** is a function that takes a few options. The first option is the schema. The schema is the root of the query and mutation types. The second option is the graphiql flag. If it is set to `true`, the GraphiQL interface( playground ) will be available at the root of the server.
In the schema, we also define the input type and resolvers for the mutation.

## GraphQL Schema

  <br />


Create a file called `schema.js` in the `graphql-api` folder. Then create a file called **query.js** and **mutation.js** in the `graphql-api` folder. In the `query.js` file, add the following code:

```
import {
  GraphQLObjectType,
  GraphQLID,
  GraphQLList,
} from 'graphql';
import Users from './data/users.js';
Import Posts from './data/posts.js';
import userType from './types/user.js';
import postType from './types/post.js';

const RootQueryType = new GraphQLObjectType ({
  name: "Query",
  fields: () => ({
    user: {
      type: userType,
      args: { id: {type: GraphQLID }},
      resolve (parent, args) {
        const user = Users [args.id - 1];
        return user;
      },
    },
    users: {
      type: GraphQLList(userType),
      resolve (parent, args) {
        const users = Users;
        return users;
      },
    },
    post: {
      type: postType,
      args: {
        id: { type: GraphQLID },
      },
      resolve (parent, args) {
        const post = Posts [args.id - 1];
        return post;
      },
    },
    posts: {
      type: new GraphQLList(postType),
      resolve (parent, args) {
        const posts = Posts;
        return posts;
      },
    },
  }),
});


export default RootQueryType;
```

A query type must exist in the schema. You can create a query type by using the `new GraphQLObjectType` function. The `name` property is the name of the type. The `fields` property is a function that returns an object with the fields of the type. The `args` property is an object with the arguments of the field. The `type` property is the type of field. The `resolve` property is a function that returns the data for the field.

### Mutation

  <br />


In the `mutation.js` file, add the following code:

```
import { GraphQLNonNull, GraphQLObjectType } from 'graphql';
import Users from './data/users.js';
import Posts from './data/posts.js';
import userType from './types/user.js';
import postType from './types/post.js';
import { inputUserType, inputPostType } from './types/input.js';


const RootMutationType = new GraphQLObjectType ({
  name: "Mutation",
  fields: () => ({
    createUser: {
      type: new GraphQLNonNull(userType),
      args: {
        input: { type: new GraphQLNonNull(inputUserType) },
      },
      resolve (parent, args) {
        const user = {
          id: Number(args.input.id),
          username: args.input.username,
          email: args.input.email,
        };
        Users.push(user);
        return user;
      },
    },
    createPost: {
      type: new GraphQLNonNull(postType),
      args: {
        input: {type: new GraphQLNonNull(inputPostType)},
      },
      resolve: async (parent, args) => {
        const post = {
          id: Number(args.input.id),
          title: args.input.title,
          text: args.input.text,
          user_id: Number(args.input.user_id),
        };
        Posts.push(post);
        return post;
      },
    },
  }),
});


export default RootMutationType;
```

  <br />


### Input Types

  <br />


In the schema folder, create a new folder called `types`. Then create a file called `input.js` in the `types` folder. In the `input.js` file, add the following code:

```
import {GraphQLID, GraphQLInputObjectType, GraphQLNonNull, GraphQLString} from 'graphql';


export const inputUserType = new GraphQLInputObjectType ({
  name: "UserInput",
  fields: () => ({
      id: { type: GraphQLID },
      username: { type: new GraphQLNonNull(GraphQLString) },
      email: { type: new GraphQLNonNull(GraphQLString) },
  }),
});

export const inputPostType = new GraphQLInputObjectType ({
  name: "PostInput",
  fields: () => ({
      id: { type: GraphQLID },
      title: { type: GraphQLString },
      body: { type: GraphQLString },
      user_id: { type: GraphQLID },
  }),
});
```

Then create our custom types. In the `user.js` file, add the following code:

```
import {GraphQLID, GraphQLList, GraphQLNonNull, GraphQLObjectType, GraphQLString} from 'graphql';
import postType from './post.js';
import Posts from '../../data/posts.js';


const userType = new GraphQLObjectType({
  name: "User",
  fields: () => ({
    id: { type: new GraphQLNonNull(GraphQLID) },
    username: { type: new GraphQLNonNull(GraphQLString) },
    email: { type: new GraphQLNonNull(GraphQLString) },
    posts: {
      type: new GraphQLList(postType),
      resolve(parent, args) {
        const posts = Posts.filter(
          (posts) => posts.user_id === JSON.stringify(parent.id)
        );
        return posts;
      },
    },
  }),
});

export default userType;
```

In the post.js file, add the following code:

```
import {GraphQLID, GraphQLNonNull, GraphQLObjectType, GraphQLString} from 'graphql';
import userType from './user.js';
import Users from '../../data/users.js';

const postType = new GraphQLObjectType({
  name: "Post",
  fields: () => ({
    id: { type: new GraphQLNonNull(GraphQLID) },
    title: { type: new GraphQLNonNull(GraphQLString) },
    text: { type: new GraphQLNonNull(GraphQLString) },
    user_id: { type: new GraphQLNonNull(GraphQLID) },
    user: {
      type: new GraphQLNonNull(userType),
      resolve(parent, args) {
        const user = Users[parent.user_id - 1];
        return user;
      },
    },
  }),
});


export default postType;
```


Now it remains to start the server with the command in the terminal:

```
npm start	
```

To test the server, open the browser and type the following URL: http://localhost:4000/graphql and put the following mutation with arbitrary data:

```
mutation {
createUser (input: {id: 4, username: "dragan", email: "123456@example.com"}) {
username
}
 }
```

Now query the server with the following query:

```
query {
  users{
    id
    username
  }
}
```

and you should see the new user with the username `dragan`.
For demo purposes, data will be stored in the `data` folder and when entering data, they will be stored temporarily in memory. When the server is restarted, the data will be lost. To avoid this, the data should be stored in a database.
In real applications, the data should be validated before being passed to the mutation. It is done through some client-side validation. Of course, the server should also validate the data.


For the user of the site to enter any information, it is necessary to create an API structure that supports such interaction ...

GraphQL Mutation

# GraphQL for beginners  

<br />

### What is GraphQL?  
  

> *GraphQL is a query language for APIs.*

  <br />

Simply put, it's a query language. It's a way to ask an API for data and talk to an API.

API ( downloaded from Wikipedia ): 
> *Application Programming Interface (API) is a connection between a computer or computer program and software service. It is a software interface that enables the programmer to access the service.*

  <br />

### How to create a GraphQL server
  <br />


First, create a folder called graphql-api. Open it in your terminal and run npm (Node package manager). This assumes you have Node installed [link](https://nodejs.org/en/).
Here are the steps:

```
mkdir graphql-api
cd graphql-api
npm init -y
```

    
Then install the following packages:

```
npm install express graphql express-graphql --save
```

Create a file called **schema.js**: 
```
touch schema.js
```

The first thing to do is to define what kind of data we want to get from the API. In this case, we want to get a string. So, we define a GraphQLObjectType called RootQueryType. This is the root of our GraphQL schema. The schema defines the kinds of data we want to get from the API.

```
const graphql = require('graphql')
const {
    GraphQLString,
    GraphQLObjectType,
    GraphQLSchema
} = graphql

const RootQuery = new GraphQLObjectType({
    name: 'RootQueryType',
    fields: {
      data: {
        type: GraphQLString,
        resolve(parent, args, context, info) {
          return 'Hello World';
        },
      },
    },
  })

module.exports = new GraphQLSchema({
  query: RootQuery,
})
```

To fulfill the request, we need to define a function called resolve. This function is called when the request is made. It's a function that returns the data we want to return: 

```
resolve(parent, args, context, info) {
  return 'Hello World';
}
```

| Arguments | Explanation |
| ------ | ------ |
| parent | Resolver return for the parent of a particular field |
| args | An object that contains all the GraphQL arguments that exist for a particular field |
| context | An object divided by each resolver that performs a particular operation |
| info | Contains information on the status of the operation |

<br />

For real use cases, we need to create a server. We can do this by creating a file called **server.js**. Let's run the following command in the terminal to download Express.js dependencies:

```
npm install express express-graphql graphql --save
```

Then create a file called **server.js** and add the following code:

```
const express = require("express");
const { graphqlHTTP } = require("express-graphql");
const schema = require("./schema")



const app = express();
app.use(
  "/graphql",
  graphqlHTTP({
    schema,
    graphiql: true,
  })
);

app.listen(4000, () => {
  console.log("Running a GraphQL API server at http://localhost:4000/graphql");
}); 
```

Now, we can run the server by running the following command in the terminal:

```
node server.js
```
  <br />


- Another example


In the schema.js file, we define the following:
  <br />
  

```
const {
  GraphQLSchema,
  GraphQLObjectType,
  GraphQLString,
  GraphQLID,
  GraphQLList,
} = require("graphql");


const Users = require("./data/users");
const Posts = require("./data/posts");


const userType = new GraphQLObjectType({
  name: "User",
  fields: () => ({
    id: { type: GraphQLID },
    username: { type: GraphQLString },
    email: { type: GraphQLString },
    posts: {
      type: new GraphQLList(postType),
      resolve(parent, args) {
        const posts = Posts.filter(
          (posts) => posts.user_id === JSON.stringify(parent.id)
        );
        return posts;
      },
    },
  }),
});


const postType = new GraphQLObjectType({
  name: "Post",
  fields: () => ({
    id: { type: GraphQLID },
    title: { type: GraphQLString },
    text: { type: GraphQLString },
    user_id: { type: GraphQLID },
    user: {
      type: userType,
      resolve(parent, args) {
        const user = Users[parent.user_id - 1];
        return user;
      },
    },
  }),
});


const RootQuery = new GraphQLObjectType({
  name: "RootQuery",
  fields: {
    user: {
      type: userType,
      args: { id: { type: GraphQLID } },
      resolve(parent, args) {
        const user = Users[args.id - 1];
        return user;
      },
    },
    users: {
      type: GraphQLList(userType),
      resolve(parent, args) {
          const users = Users;
        return users;
      },
    },
    post: {
      type: postType,
      args: { id: { type: GraphQLID } },
      resolve(parent, args) {
        const post = Posts[args.id - 1];
        return post;
      },
    },
    posts: {
      type: new GraphQLList(postType),
      resolve(parent, args) {
        return Posts;
      },
    },
  },
});




module.exports = new GraphQLSchema({
  query: RootQuery,
});
```

So, we have a GraphQL schema that defines the following:
- A user
- A list of users
- A post
- A list of posts

Each of these objects has a field that returns the data we want to return.

In the new folder called **data**, we create the following files:
- users.js
- posts.js  
as follows:
[link](https://github.com/ogurenko/graphql-api/data)


Open the graphql explorer by entering the following URL in your browser:

```
http://localhost:4000/graphql
```

Send a request to the server by entering the following query in the GraphQL explorer:

```
query {
 {
  user (id: 1) {
    username
    posts {
      id
      text
      title
    }
  }
}	
```

Play around with the GraphQL explorer to see how the data is returned.
Now, you're ready to start building your GraphQL API. In addition to the Query type, you can also define the following types:
- A mutation type
- A subscription type
In the next posts, we'll learn how to build a mutation type and a subscription type.





When data is needed for a website, the process by which it is accessed is very important. Usually, speed and efficiency are chosen ...