CODEWITHSUNDEEP
reactjsreact-apolloapollo-client
user12551055
user12551055

Reputation:

ReactJS apolloClient Could not find "client" in the context or passed in as an option

I am not getting why it is firing me this problem, and it was worked same way before in my another application. I just tried last 3 days, i coulndt figure out this issue yet.

I found this solution on stackoverflow: React Apollo Error: Invariant Violation: Could not find "client" in the context or passed in as an option

But it is not solved my problem

Can anyone help me in this case?

THis is my App.js

import EmpTable from './components/empTable';
import { ApolloProvider } from '@apollo/react-hooks';


import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:8000/graphql/',
  cache: new InMemoryCache(),
});




function App() {
  return (
    <ApolloProvider client={client}>
        <EmpTable />
    </ApolloProvider>
  );
}

export default App;

and this is my EmplyeeTable

import { gql, useQuery } from "@apollo/client";


function EmpTable() {

  const GET_EMPLOYEE = gql`
    query getEmp($id: String) {
      employeeById(id: $id) {
        id
        name
        role
      }
    }
  `;


  const {refetch} = useQuery(GET_EMPLOYEE)

  return (
    <div className="row">
      {/* some div  */}
    </div>
  );
}

export default EmpTable;

I am getting following error with this code:

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.
new InvariantError
src/invariant.ts:12
   9 | export class InvariantError extends Error {
  10 |   framesToPop = 1;
  11 |   name = genericMessage;
> 12 |   constructor(message: string | number = genericMessage) {
  13 |     super(
  14 |       typeof message === "number"
  15 |         ? `${genericMessage}: ${message} (see https://github.com/apollographql/invariant-packages)`
View compiled
invariant
src/invariant.ts:27
  24 |   message?: string | number,
  25 | ): asserts condition {
  26 |   if (!condition) {
> 27 |     throw new InvariantError(message);
  28 |   }
  29 | }
  30 |

The error is too long i just puted few of them here. Can anyone please let me know what exactly the issue?

Upvotes: 0

Views: 356

Answers (1)

dongnhan
dongnhan

Reputation: 1768

Try importing ApolloProvider from @apollo/client

import { ApolloProvider } from '@apollo/client';

Upvotes: 1

Related Questions