Apollo Client Error: Could not find “client” in the context or passed in as an option. Wrap the root component in an <ApolloProvider>

Question

I am new to do this Apollo.

I am currently trying to get create an app with React and Apollo.

When I start my application, I am getting the following error:

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

Here is my RegisterController -> index.tsx

import * as React from "react";
import { ChildMutateProps, graphql } from 'react-apollo';
import gql from 'graphql-tag';

interface Props {
  children: (
    data: { submit: (values: any) => Promise<null> }
  ) => JSX.Element | null;
}

class C extends React.PureComponent<ChildMutateProps<Props, any, any>> {
  submit = async (values: any) => {
    console.log(values);

    const response = await this.props.mutate({
      variables: values
    });

    console.log('response: ', response);

    return null;
  };

  render() {
    return this.props.children({ submit: this.submit });
  }
}

const registerMutation = gql`
  mutation($email: String!, $password: String!) {
    register(email: $email, password: $password) {
      path
      message
    }
  }
`;

export const RegisterController = graphql(registerMutation)(C);

Here is my main index.tsx

import React from 'react';
import ReactDOM from 'react-dom';

import reportWebVitals from './reportWebVitals';
import { ApolloProvider } from 'react-apollo';
import { client } from './apollo';
import { Routes } from './routes';
import "./index.css";

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

Finally, here is my package.json

{
  "name": "@abb/controller",
  "version": "1.0.0",
  "main": "dist/index.js",
  "typings": "dist/index.d.ts",
  "license": "MIT",
  "scripts": {
    "build": "rm -rf ./dist && tsc"
  },
  "dependencies": {
    "graphql": "^15.4.0",
    "graphql-tag": "^2.11.0",
    "react": "^17.0.1",
    "react-apollo": "^3.1.5",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@types/node": "^14.14.20",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "tslint": "^6.1.3",
    "tslint-config-prettier": "^1.18.0",
    "typescript": "^4.1.3"
  }
}

As you can see in my index.tsx, it is wrapped with ApolloProvider with the client passing in there. Why I am getting this error? Could anyone please help me with this issue?

Thank you.

Ezra Siton Ezra Siton · Accepted Answer · 2021-01-14T09:45:09

react-apollo HAS BEEN DEPRECATED.

React Apollo functionality is now directly available from @apollo/client

Read here: https://github.com/apollographql/react-apollo#readme

Apparently, the problem is with the versions of your packages (apollo V3 group some client packages to avoid those issues). Read more: https://www.apollographql.com/docs/react/migrating/apollo-client-3-migration/.

Use apollo client v3 (Since June 2020)

Instead use apollo-client: https://github.com/apollographql/apollo-client.

command:

npm install @apollo/client

import:

import { ApolloProvider } from '@apollo/client'

Follow this step-by-step example: https://www.apollographql.com/docs/react/get-started/

Apollo Client Error: Could not find “client” in the context or passed in as an option. Wrap the root component in an <ApolloProvider>

1 Answers