在 Mutation 的上下文或道具中找不到“客户”

Question

执行我的 React Native 应用程序后，我遇到了这个错误： Could not find "client" in the context or props of Mutation. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance via props.

这是我的阿波罗客户

import { Platform } from "react-native";
import { ApolloClient, InMemoryCache } from "@apollo/client";

// To access our host machine and not the device itself we use a special ip on android
// If we are using IOS access localhost:4000 else use 10.0.0.2:4000
const host =
  Platform.OS === "ios" ? "http://localhost:4000" : "http://10.0.2.2:4000";

export const client = new ApolloClient({
  uri: host,
  cache: new InMemoryCache(),
});

这里是包装我的根组件的 index.tsx：

import { ApolloProvider } from '@apollo/client';
import { client } from "./apollo";
import { Routes } from "./routes/index";

export default class App extends React.PureComponent {
  render() {
    return (
      <ApolloProvider client={client}>
        <Routes />
      </ApolloProvider>
    );
  }
}

Answer 1

在 V 3.0 之前，react-apollo 和 apollo-client（以及其他子包）位于单独的包中（产生了很多与包版本相关的问题/错误。Issue 2042 -或- issue 2900）。

最好的办法是迁移到 Apollo Client 3.0。

react-apollo 包已弃用，功能 上述每个包提供的现在可以从 @阿波罗/客户。 Migrating to Apollo Client 3.0

Apollo V3.0 很棒的“入门”/教程示例 + 沙盒：

• https://www.apollographql.com/docs/react/get-started/

客户

在您的情况下，client 似乎是未定义的。运行和测试：

console.log(client); /* return object -or- not? */

尝试在一个文件中运行此代码（如果此代码工作正常 - 将您想要的文件分开并使用module.exports）。

import React from "react";
import { render } from "react-dom";
import {
ApolloClient,
InMemoryCache,
ApolloProvider,
useQuery,
gql
} from "@apollo/client";


export const client = new ApolloClient({
  uri: "https://48p1r2roz4.sse.codesandbox.io",
  cache: new InMemoryCache()
});


export default class App extends React.PureComponent {
render() {
  return (
    <ApolloProvider client={client}>
        <h2>My first Apollo app <span>?</span></h2>
    </ApolloProvider>
  );
}
}

render(<App/>, document.getElementById("root"));