在 Query 的上下文中或作为传递的道具中找不到“客户端”

Posted 2023-03-10

【中文标题】在 Query 的上下文中或作为传递的道具中找不到“客户端”

【英文标题】：Could not find "client" in the context of Query or as passed props

【发布时间】：2018-09-25 14:14:07

【问题描述】：

这就是我尝试在我的 react 本机应用程序中实现 apollo graphQL 的方式。

但我确实得到了错误

Could not find "client" in the context of Query or as passed props. Wrap the root component in an <ApolloProvider>

所以我认为我确实做到了这一点，但显然我误解了一些东西。

import React,  Component  from 'react'
import  ApolloProvider, graphql  from 'react-apollo'
import  ApolloClient  from 'apollo-client'
import  createHttpLink  from 'apollo-link-http'
import  InMemoryCache  from 'apollo-cache-inmemory'
import gql from 'graphql-tag'

import Routes from './config/routes'

// Initialize the Apollo Client
const client = new ApolloClient(
  link: createHttpLink( uri: 'http://localhost:3000' ),
  cache: new InMemoryCache()
)

// Define query types
const DATA_QUERY = gql`
  query 
    getVersion 
      version
    
  
`

export class App extends Component 
  render () 
    console.log(this.props)
    // ApolloProvider lets us use Apollo Client in descendant components
    return (
      <ApolloProvider client=client>
        <Routes />
      </ApolloProvider>
    )
  


// Inject query response as `this.props.data`
export default graphql(DATA_QUERY)(App)

【参考方案1】：

<ApolloProvider> 不会包装 graphql(DATA_QUERY) 应用程序，因为它位于该组件内。像这样的东西应该可以工作：（虽然你可能想选择一个不同的名字）

const ApolloRoutes = graphql(DATA_QUERY)(Routes);

export default class App extends Component 
  render () 
    console.log(this.props)
    // ApolloProvider lets us use Apollo Client in descendant components
    return (
      <ApolloProvider client=client>
        <ApolloRoutes />
      </ApolloProvider>
    )
  

【参考方案2】：

在开始使用@apollo/react-hooks 后，我遇到了这个问题，试图找到解决同一问题的方法。由于错误的表述是相同的，我仍然会提供我的答案以防它对某人有所帮助。

错误是内容周围缺少ApolloHooksProvider。我通过更改来修复它

<ApolloProvider client=client>
    <Content />
</ApolloProvider>

到这里

import  ApolloProvider as ApolloHooksProvider  from '@apollo/react-hooks'

<ApolloProvider client=client>
    <ApolloHooksProvider client=client>
        <Content />
    </ApolloHooksProvider>
</ApolloProvider>

【讨论】：

请注意，对于react-apollo >= v3.*，您根本不需要将Content 包裹在ApolloHooksProvider 内