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.
question from:
https://stackoverflow.com/questions/65713544/apollo-client-error-could-not-find-client-in-the-context-or-passed-in-as-an-o