[graphQL] Setup

GraphQL is a powerful query language. It allows for a more flexible and efficient approach than RESTful API.

REST API approach

You might have to send multiple http request for getting multiple data.

Endpoint for getting particular book

• title, genre, reviews, authorID
• domain.com/books/:id

Endpoint for getting author info

• name, age, bookID
• domain.com/authors/info

GraphQL approach

You only send a single http request for getting multiple data.

{
   book(id: 123) {
      title
      genre
      reviews
      author {
         name
         age
         books {
          name
         }
      }
   }
}

---

Setup Apollo

Installation

npm install @apollo/client graphql apollo-boost @apollo/react-hooks

• apollo-boost or @apollo/client

Create Client

apollo.js

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

const client = new ApolloClient({
  uri: 'https://movieql.now.sh/',
  cache: new InMemoryCache(),
});

export default client;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

import { ApolloProvider } from '@apollo/client';
import client from './apollo';

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById('root')
);