找不到“客户"在 Query 的上下文中或作为传递的道具 [英] Could not find "client" in the context of Query or as passed props

问题描述

这就是我尝试在我的 React Native 应用程序中实现 apollo graphQL 的方式.

This is how I'm trying to implement apollo graphQL in my react native application.

但是我确实得到了错误

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

所以我认为我已经完全做到了这一点，但显然我误解了一些东西.

So I thought I have done exactly this, but obviously I'm missunderstanding something.

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)

推荐答案

没有包装 graphql(DATA_QUERY) 应用程序，因为它在里面成分.这样的事情应该可以工作:(尽管您可能想要选择不同的名称)

The <ApolloProvider> does not wrap the graphql(DATA_QUERY) application as it is inside that component. Something like this should work: (though you might want to choose a different name)

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

这篇关于找不到“客户"在 Query 的上下文中或作为传递的道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！