Экземпляр клиента Apollo не найден

Question

No Apollo Client instance can be found. Please ensure that you have called `ApolloProvider` higher up in your tree.

function LoginForm(props) {
    const client = useApolloClient();
      function userLogin(code){
          googleAuthenticate(code.code)
           .then(res => {

Я получаю эту ошибку при попытке получить доступ к клиенту apollo.

У меня есть 2 файла, InitApollo и WithApollo.Один запускает клиент Apollo, а другой - HOC, чтобы обернуть все страницы Next.js внутри него.

У меня есть файл _app.tsx, который является корнем всех других страниц / компонентов, и он содержит провайдера, как показано здесь.

import App from 'next/app'
import React from 'react'
import { ApolloProvider } from '@apollo/react-hooks'
import withApollo from '../lib/withApollo'

class MyApp extends App<any> {
  static displayName = 'MyApp'

  render () {
    const { Component, pageProps, apolloClient } = this.props
    console.log(apolloClient);
    return (
      <ApolloProvider client={apolloClient}>
        <Component {...pageProps} />
      </ApolloProvider>
    )
  }
}

export default withApollo(MyApp)

Компонент, который получает фактическую ошибкуявляется компонентом React "LoginForm", который находится на странице Next.js.И страница, и компонент LoginForm заключены в «withApollo», который, как я полагаю, должен предоставить доступ клиенту Apollo?

LoginPage.tsx (Next.Js Page)

class LoginPage extends React.Component {
  static async getInitialProps (context) {
    const {loggedInUser} = await isLoggedIn(context.apolloClient);
    if (loggedInUser) {
      redirect(context, '/dashboard')
    }
  }

  render () {
    return (
        <LoginLayout>

        <div id="loginform">
            <LoginForm></LoginForm>
        </div>

        <style jsx>{`
        #loginform {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .row{
            flex: 1;
        }
        `}</style>
    </LoginLayout>
    )
  }
}

export default withApollo(LoginPage);

И это LoginForm.tsx , который содержит логику входа в систему.

function LoginForm(props) {
    const client = useApolloClient();
    function userLogin(code){
         googleAuthenticate(code.code)
         .then(res => {
             console.log(res);
            document.cookie = cookie.serialize('token', res, {
                maxAge: 30 * 24 * 60 * 60 // 30 days
              });

              client.writeData({data: {
                  isLoggedIn: true
              }})

                client.cache.reset().then(() => {
                    redirect({}, '/dashboard');
                })
         })
         .catch(err => {
            console.log(err);
         });
    }

    return(<div>
             <GoogleLogin
            clientId="xxx"
            buttonText="Login"
            onSuccess={userLogin}
            onFailure={userLogin}
            cookiePolicy={'single_host_origin'}
            hostedDomain={"xxx"}
            responseType={"code"}
  />
            </div>
    );
};

export default withApollo(LoginForm);