Could not find apollo client using strapi and react

Questions and Answers
1

I am creating strapi-react application using this tutorial.

I am getting this error

Could not find "client" in the context or passed in as an option. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance in via options.

Would someone guide me on how I can navigate? or point to the way it has been solved in the past

2

Hey Ciox how are you?

As the issue mention, you should wrap your <App /> around <Apolloprovide> like this:

import React from "react";
import ReactDOM from "react-dom";
import { ApolloProvider } from "@apollo/react-hooks";
import App from "./containers/App";
import client from "./utils/apolloClient";
import { BrowserRouter as Router } from "react-router-dom";
import "./index.css";

ReactDOM.render(
  <Router>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </Router>,
  document.getElementById("root")
);

You must import the client:

import client from "./utils/apolloClient";

and:

<ApolloProvider client={client}>

However you need to create this client in the ./src/utils/apolloClient.js file:

import { ApolloClient } from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { HttpLink } from "apollo-link-http";

const cache = new InMemoryCache();
const link = new HttpLink({
  uri: `${process.env.REACT_APP_BACKEND_URL}/graphql`
});
const client = new ApolloClient({
  cache,
  link
});

export default client;

Hope it will help you!

3

Hello Mcastres

It worked. Thank you!

4

Update:

I imported apollo-react hooks as follows in the src/index.js

import { ApolloProvider } from "@apollo/react-hooks";

As opposed to

import { ApolloProvider } from "react-apollo";

React Apollo is no longer working