Simplifying React with GraphQL: A Winning Combination

In this article, we delve into the seamless integration of ReactJS and GraphQL APIs, unveiling the hidden potential behind GraphQL. As a highly efficient data-fetching solution, GraphQL revolutionizes the way we interact with servers. Join us as we explore the depths of GraphQL's simplicity and its transformative impact on our lives. Originally developed by Facebook in 2012, this groundbreaking project was open-sourced in 2015, capturing the attention of the developer community worldwide.

GraphQL simplifies our headache to use multiple endpoints for different data. GraphQL is a query language so we can use different queries to fetch different types of data. It helps to take data according to our desired format.

Querying in GraphQL

• Aliases: Aliases use to rename the result of a field to anything you want.

  example query-->

    {
      hero{
      name
        friends{
          name
        }
    }
    }
  

  query result-->

    {
      "data": {
        "hero": {
          "name": "R2-D2",
          "friends": [
            {
              "name": "Luke Skywalker"
            },
            {
              "name": "Han Solo"
            },
            {
              "name": "Leia Organa"
            }
          ]
        }
      }
    }
  

• Fields: We can simply add object fields to get any data.

  Query:

    {
      hero {
        name
      }
    }
  

  Query result:

    {
      "data": {
        "hero": {
          "name": "R2-D2"
        }
      }
    }
  

Setup for using GraphQL

First, you need to create a basic React project using GraphQL APIs. For writing queries we can use multiple methods here I will use the Apolo client.

The most popular and comprehensive GraphQL library is Apollo Client.

npm install @apollo/client graphql

import React from "react";
import ReactDOM from "react-dom";
import { ApolloProvider, ApolloClient, InMemoryCache } from "@apollo/client";

import App from "./App";

const client = new ApolloClient({
  uri: "https://api.spacex.land/graphql/",
  cache: new InMemoryCache()
});

const rootElement = document.getElementById("root");
ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  rootElement
);

Writing GraphQL queries with ReactJS.

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

const FILMS_QUERY = gql`
  {
    launchesPast(limit: 10) {
      id
      mission_name
    }
  }
`;

export default function App() {
  const { data, loading, error } = useQuery(FILMS_QUERY);

  if (loading) return "Loading...";
  if (error) return <pre>{error.message}</pre>

  return (
    <div>
      <h1>SpaceX Launches</h1>
      <ul>
        {data.launchesPast.map((launch) => (
          <li key={launch.id}>{launch.mission_name}</li>
        ))}
      </ul>
    </div>
  );
}

There are more methods available to use GraphQL APIs.

example: Urql, React Query + GraphQL Request, React Query + Axios , React Query + Fetch API etc.

GraphQL is a very attractive way to write APIs Queries. we can try it on the given link.

TRY GRAPHQL: https://graphqlzero.almansi.me/api

❤️Thank you for reading the article. Please share your valuable suggestion to improve the content.