在查询的上下文中或作为传递的props找不到“客户端”

IT技术 javascript reactjs react-native react-apollo
2021-05-14 01:20:48

这就是我试图在我的本机应用程序中实现 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)
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>

在<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>
    )
  }
}
其它你可能感兴趣的问题
上一篇React Ant Design - 要拆分为 2 列的表单项 下一篇如何有条件地测试样式组件和子元素？