Error: Could not find "client"

[dcjones1]

I'm trying to integrate this into a project I'm working on but I keep 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.

I've followed along exactly with the example you built but still get the error. Any idea what might be causing this? Here's some of my code. Apollo looks the exact same as what you have, I have a test page.

import React, { FunctionComponent } from 'react';
import TestComponent from '../components/TestComponent';
import withData from '../Apollo';

export default withData((props: any) => {
  return (
    <TestComponent />
  )
})

import React, { FunctionComponent } from 'react';
import { useQuery } from '@apollo/react-hooks';
import { gql } from 'apollo-boost';

const MY_QUERY = gql`QUERY INSIDE HERE`

const TestComponent: FunctionComponent = () => {
  const { data } = useQuery(MY_QUERY, {
    notifyOnNetworkStatusChange: true,
  });

  if (data) {
    return (
      <div>
        <div>I'll map through data here.</div>
      </div>
    );
  } else {
    return <div>Loading...</div>;
  }
};

export default TestComponent;

[ZhiXiao-Lin]

I'm trying to integrate this into a project I'm working on but I keep 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.

I've followed along exactly with the example you built but still get the error. Any idea what might be causing this? Here's some of my code. Apollo looks the exact same as what you have, I have a test page.

import React, { FunctionComponent } from 'react';
import TestComponent from '../components/TestComponent';
import withData from '../Apollo';

export default withData((props: any) => {
  return (
    <TestComponent />
  )
})

import React, { FunctionComponent } from 'react';
import { useQuery } from '@apollo/react-hooks';
import { gql } from 'apollo-boost';

const MY_QUERY = gql`QUERY INSIDE HERE`

const TestComponent: FunctionComponent = () => {
  const { data } = useQuery(MY_QUERY, {
    notifyOnNetworkStatusChange: true,
  });

  if (data) {
    return (
      <div>
        <div>I'll map through data here.</div>
      </div>
    );
  } else {
    return <div>Loading...</div>;
  }
};

export default TestComponent;

I had the same problem as you. I tried to replace the default version of "next-apollo": "^2.1.3" with "next-apollo": "^3.0.0-beta.5" and it worked.

[dcjones1]

That's my exact issue. Thanks!

[adamsoffer]

Thanks @ZhiXiao-Lin. Heads up, I just published v3.0.0.