GraphQL – Future of APIs

GraphQL: The Future of Enterprise Software and APIs

GraphQL is a query language and server-side runtime for application programming interfaces (APIs) that focuses on giving clients only the data they require.

GraphQL was established with the intention of creating APIs that are fast, adaptable, and developer-friendly. It also works with the GraphQL integrated development environment (IDE). GraphQL, a REST alternative, can be used by developers to make requests that pull data from numerous data sources in a single API call.

GraphQL developer tools also allow API maintainers to add or remove fields without affecting existing queries. APIs can be developed in any way that developers want, and the GraphQL definition assures that they perform predictably for clients.

Benefits of GraphQL

In a GraphQL application, a GraphQL schema establishes a single source of truth. It enables an organisation to federate its whole API.

GraphQL calls are processed in a one round trip.. Clients receive exactly what they require, with no overfetching.

Data types that are clearly defined decrease confusion between the client and the server.

GraphQL is self-reflective. A client can request a list of accessible data types. This is great for document generation on the fly.

GraphQL with Database allows an application API to evolve without causing existing queries to break.

There are numerous open-source GraphQL extensions available to provide functionality not available with REST APIs.

GraphQL does not impose a particular application architecture. It can be added on top of an existing REST API and is compatible with existing API management tools.

Also Read: [A comprehensive guide to Component Communication in Vue.js]

Disadvantages

For developers who are already familiar with REST APIs, GraphQL poses a learning curve.

GraphQL offloads much of the effort of a data query to the server, which complicates things for server developers.

GraphQL may necessitate different API management tactics than REST APIs, depending on how it is implemented, particularly when it comes to rating restrictions and pricing.

Caching is more complicated than REST.

API maintainers are also responsible for creating maintainable GraphQL schemas.

GraphQL with Database

Graphql is an API query language that gives a detailed description of the data in your API. It empowers consumers to request precisely what they require in return.

REST has some drawbacks, including:

• Over fetching
• Several requests for multiple resources
• Each client must be aware of the location of each service.
• On nested data, a waterfall network request is made.

Then comes graphQL, a server side runtime and a query language for your API.

GraphQL allows you to request everything in a single query, saving bandwidth and reducing waterfall requests. It also allows clients to request custom data specs.

REST VS GRAPHQL

Set Up GraphQL in a React App

Apollo Client and GraphQL must be installed on the client side. Apollo Server and Graphql must be installed on the server side. Using yarn or npm, you can easily install packages.

npm install @apollo/client graphql (ReactJS)
npm install apollo-server graphql (NodeJS)

Let’s get an understanding of GraphQL with ReactJS. Before you start development, you need to know key points of GraphQL :

1.useQuery

Query is used to get data from the server.you can choose whatever you want in response. It returns data, loading, error, and refetch.

Example :-

 const GET_DOG_PHOTO = gql`
  query Dog($breed: String!) {
    dog(breed: $breed) {
      id
      displayImage
    }
  }
`;

function DogPhoto({ breed }) {
  const { loading, error, data } = useQuery(GET_DOG_PHOTO, {
    variables: { breed },
  });

  if (loading) return null;
  if (error) return `Error! ${error}`;

  return (
     <img src={data.dog.displayImage} style={{ height: 100, width: 100 }} />
  );
}

2. Refetch

Refetching enables you to refresh query results in response to a particular user action, as opposed to using a fixed interval. Example :-

function DogPhoto({ breed }) {
  const { loading, error, data, refetch } = useQuery(GET_DOG_PHOTO, {
    variables: { breed }
  });

  if (loading) return null;
  if (error) return `Error! ${error}`;

  return (
  <div>
      <img src={data.dog.displayImage}" /> 
      <button> refetch()}Refetch!</button>
  </div>
  ); 
}

3. useLazyQuery

When React renders a component that calls useQuery, Apollo Client automatically executes the corresponding query. But what if you want to execute a query in response to a different event, such as a user clicking a button?

The useLazyQuery hook is perfect for executing queries in response to events besides component rendering

Example :-

import { useLazyQuery } from '@apollo/client';

function DelayedQuery() {
  const [getDog, { loading, error, data }] = useLazyQuery(GET_DOG_PHOTO);
  if (loading) return <p>Loading ...</p>;
  if (error) return `Error! ${error}`;
  return (
  <div>
    {data?.dog && <img src={data.dog.displayImage} />}
    <button onClick={() => getDog({ variables: { breed: 'bulldog' } })}>Click me!</button>
  </div>
  );
}

4. Mutation

Mutation is used when you want to add or modify some data into a server.
Example:-

import { gql, useMutation } from '@apollo/client';
  const ADD_TODO = gql`
  mutation AddTodo($text: String!) {
    addTodo(text: $text) {
      id
      text
    }
  }
`;
 function AddTodo() {
  let input;
  const [addTodo, { data, loading, error }] = useMutation(ADD_TODO);
  if (loading) return 'Submitting...';
  if (error) return `Submission error! ${error.message}`;
  return (
     <div>
     <form
     onSubmit={e => {
      e.preventDefault();
     addTodo({ variables: { text: input.value } });
       input.value = '';
  }}
>
<input ref={node => { input = node;}}/>
    <button type="submit">Add Todo</button>
    </form>
    </div>
); 
}

5. Subscription

Like queries, subscriptions enable you to fetch data. Unlike queries, subscriptions are long-lasting operations that can change their result over time. They can maintain an active connection to your GraphQL server (most commonly via WebSocket), enabling the server to push updates to the subscription’s result.

1. npm install subscriptions-transport-ws

2. Initialize websocket

import { WebSocketLink } from '@apollo/client/link/ws';
  const wsLink = new WebSocketLink({
  uri: 'ws://localhost:4000/subscriptions',
  options: {
    reconnect: true
  }
});

3. Execute subscription

const COMMENTS_SUBSCRIPTION = gql`
  subscription OnCommentAdded($postID: ID!) {
    commentAdded(postID: $postID) {
      id
      content
     }
  }
`;
 function LatestComment({ postID }) {
 const { data, loading } = useSubscription(
 COMMENTS_SUBSCRIPTION,
 { variables: { postID } }
 );
 return
 <h4>New comment: {!loading && data.commentAdded.content}</h4>;
 }

Wrapping up

I hope the above information has helped you understand the fundamentals of GraphQL. There is a lot more to learn about GraphQL, which I will cover in a future article. Give GraphQL a try for your API development after learning about its advantages over REST APIs. If you are looking to Hire ReactJS Developers, connect to us.

Bytes Technolab Inc. is a leading ReactJS Development Company that can provide you with MERN, ReactJS + NodeJS + GraphQL API Development Services.