如何解决Apollo GraphQL 连接失败
我的根组件已经用 ApolloProvider 标签包装了,但错误消息告诉我不是。
错误信息
Invariant Violation: 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.
This error is located at:
in App (created by ExpoRoot)
问题是我的根组件已经用 ApolloProvider 标签包裹
反应本机代码
IMPORT 语句
import {
ApolloClient,InMemoryCache,useQuery,ApolloProvider,gql,} from "@apollo/client";
与 GraphQL 的连接
const client = new ApolloClient({
uri: "https://www.outvite.me/gql/gql",cache: new InMemoryCache(),defaultOptions: { watchQuery: { fetchPolicy: 'cache-and-network' } },})
测试查询
const USER_QUERY = gql`
query USER {
users {
nodes {
edge {
username
}
}
}
}
`
默认应用
这就是错误所在
const { data,loading } = useQuery(USER_QUERY) 是回溯显示的行
export default function App() {
const { data,loading } = useQuery(USER_QUERY)
return (
<ApolloProvider client={client}>
<View>
<Text style={styles.text}>Open</Text>
<Text style={styles.text}>Another text</Text>
</View>
<Button title="Toggle Sidebar" onPress={() => toggleSidebarView()} />
<Button title="Change theme" onPress={() => toggleColorTheme()} />
</ApolloProvider>
);
}
解决方法
如果我没记错的话,useQuery
钩子仅在您位于已经包含在 ApolloProvider
中的组件中时才有效,因此您可能想要做这样的事情
export default function MainApp() {
const { data,loading } = useQuery(USER_QUERY)
return (
<View>
... use 'data' in here somewhere...
</View>
);
}
然后顶级 App
组件看起来像
export default function App() {
return (
<ApolloProvider client={client}>
<MainApp />
</ApolloProvider>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。