I wanted to point out that some of the dependencies are old and may cause conflicts for this instructions.
1. React 18 compatibility, to your console
ReactDOM.render is no longer supported in React 18.
To fix this warning
Remove this
import ReactDOM from "react-dom";
Replace with this
import { createRoot } from 'react-dom/client';
And Instead this
ReactDOM.render(
<Router>
<ApolloProvider client={client}>
<App />
</ApolloProvider>
</Router>,
document.getElementById("root")
);
Use this
const root = createRoot(document.getElementById('root'));
root.render(
<Router>
<ApolloProvider client={client}>
<App />
</ApolloProvider>
</Router>
);
2. About installing dependencies for apollo
Instead this
yarn add apollo-boost @apollo/react-hooks graphql react-apollo
Use this
yarn add @apollo/client graphql
The problem of first one is conflict with the latest packages and also you will encounter
Cannot read properties of undefined (reading ‘bind’) useQuery
Note that if you have this installed previously, just delete apollo-boost
, @apollo/react-hooks
, and react-apollo
to your package.json then type the 2nd one to update your libraries
Please refer Apollo Docs
Hey! How about the missing dependencies that I removed, now I getting more errors, THANKS A LOT! 
Just Re-import your packages
For ./src/utils/apolloClient.js
Remove this
import { ApolloClient } from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { HttpLink } from "apollo-link-http";
Replace with this
import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
For ./src/index.js
Remove this
import { ApolloProvider } from "@apollo/react-hooks";
Replace with this
import { ApolloProvider } from '@apollo/client';
For ./src/components/Query/index.js
Remove this
import { useQuery } from "@apollo/react-hooks";
Replace with this
import { useQuery } from '@apollo/client';
It should fix the apollo packages
3. Lastly, not so important but maybe helpful for others want try this React integration
You copied everything querying commands (I don’t know, I just having weird naming habits) and the still breaks, and you encounter like these error message
"message": "Variable \"$slug\" of required type \"String!\" was not provided."
and thinking what happen
Just remove the exclamation mark !
, the reason that message occur, it because the fields with exclamation mark !
is Required, to bypass instead this ($slug: String!)
change to `($slug: String)’, just bring it back, because this field should not nullable in the first place.
I hope this help