Блог

Я новичок в этом Apollo.

В настоящее время я пытаюсь создать приложение с помощью React и Apollo.

Когда я запускаю свое приложение, я получаю следующую ошибку:

Не удалось найти «client» в контексте или передано в качестве опции. Оберните корневой компонент в , или передайте экземпляр ApolloClient через опции.

 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);
 

Вот мой основной 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')
);
 

Наконец, вот мой 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 amp;amp; 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"
  }
}
 

Как вы можете видеть в моем index.tsx, он обернут с помощью ApolloProvider, в который передается клиент.
Почему я получаю эту ошибку?
Не мог бы кто-нибудь, пожалуйста, помочь мне с этим вопросом?

Спасибо.

react-apollo УСТАРЕЛ.

Функциональность React Apollo теперь доступна напрямую из @apollo /client

Читайте здесь: https://github.com/apollographql/react-apollo#readme

По-видимому, проблема связана с версиями ваших пакетов ( apollo V3 сгруппируйте некоторые клиентские пакеты, чтобы избежать этих проблем). Подробнее: https://www.apollographql.com/docs/react/migrating/apollo-client-3-migration /.

Используйте apollo client v3 (с июня 2020 года)

Вместо этого используйте apollo-client : https://github.com/apollographql/apollo-client .

команда:

 npm install @apollo/client
 

импорт:

 import { ApolloProvider } from '@apollo/client'
 

Следуйте этому пошаговому примеру:
https://www.apollographql.com/docs/react/get-started /

В моем случае я смог исправить это, передав значение client в перехват запроса, например:

   import { appClient } from 'src/config/apollo'; //this is a config file in my repo where I'm defining the client location/info
  import { useGetMyDataQuery } from '../documents/GetMyData.generated'; // the React/Typscript file generated from the GraphQL query file
  ...
  const { loading, data, error } = useGetMyDataQuery({
    client: appClient,
  });
 

Тогда как до изменения мой запрос выглядел следующим образом:

   const { loading, data, error } = useGetMyDataQuery();
 

Мне повезло с понижением @apollo/client рейтинга с v3.5.x до v3.4.17 , и мои тесты (из-за которых я получил эту ошибку) снова начали проходить.

npm i @apollo/client@3.4.17

В моем случае я выполнял рендеринг на сервере, поэтому мне нужно было объединить с маршрутизатором и маршрутами, например:

Браузер:

         <ApolloProvider client={client}>
          <BrowserRouter basename={basename}>
            <Routes>
              <Route path="/" element={<App />} />
            </Routes>
          </BrowserRouter>
        </ApolloProvider>
 

Сервер:

     <ConfigContext.Provider value={config}>
      <StaticRouter basename={config.app.URL} location={_event.path}>
        <App />
      </StaticRouter>
    </ConfigContext.Provider>,

 

Если это ваш случай, то следующий документ:

• https://reactrouter.com/docs/en/v6/guides/ssr
• https://www.apollographql.com/docs/react/performance/server-side-rendering/

В моем случае мне не хватает обернуть компонент <ApolloProvider></ApolloProvider> тегами и определить в нем клиента. Мой код после исправления:

 function rootFunction() {

const client = new ApolloClient({
    uri: 'api_url',
});

return (
    <ApolloProvider client={client}>
        your html code and your components here
    </ApolloProvider>
)
 

}

в моем случае помогает обновить react-hooks до версии 4

  "@apollo/react-hooks": "^4.0.0"