Apollo Client Basic Setup•//with npm:npm i @apollo/react-hooks apollo-boost graphql //with yarn:yarn add @apollo/react-hooks apollo-boost graphql apollo-boost://with npm:npm i @apollo/react-hooks apollo-client graphql graphql-tag Apollo-cache-inmemory apollo-link-ws //with yarn:yarn add @apollo/react-hooks apollo-client graphql graphql-tag apollo-cache-inmemory apollo-link-ws Messtone GraphQL endpoint:import ApolloClient from “Apollo-boost”;const client=new ApolloClient({uri:”https://messtone-graphql-endpoint.com/api/graphql&#8221;,});import ApolloClient from “apollo-client”;import{WebSocketLink}from “apollo-link-ws”;import{InmemoryCache}from “apollo-cache-inmemory”;const client=new ApolloClient({link:new WebSocketLink({uri:”was://messtone-graphql-endpoint.com/v1/graphql”,options:{reconnect:true,connectionParams:{headers:{Authorization:”Bearer messtoneauthtoken”,}},},});catch:new InMemoryCache( ),});import{ApolloProvider}from ”apollo/react-hooks”;const rootElenent=document.getElementById(“root”);ReactDOM.render(<React.StrictMode><ApolloProvider client={client}><BrowserRouter><Switch><Route exact path=”/”component={App}/><Route exact path=”/new”component={NewPost}/><Route exact path=”/edit/:id”component={EditPost}/></Switch></BrowserRouter></ApolloProvider></React.StrictMode>,rootElement);//executing queries client.query({query:GET_POST,variables:{limit:5},}).then((response)=>console.log(response.data)).catch((err)=>console.error(err));//executing mutations client.mutate({mutation:CREATE_POST,variable:{title:”Hello”,body:”World”},}).then((response)=>console.log(response.data)).catch((err)=>console.error(err));//executing subscriptions client.subscribe({subscription:GET_POST,variables:{id:”8883346c-6dc3-4753-95da-0cc0df750721″},}).then((response)=>console.log(response.data)).catch((err)=>console.error(err));