Strapi - Build a blog using Strapi, React and Apollo

10

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! :neutral_face:

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