Could not find "client" in the context of Query or as passed props

All we need is an easy explanation of the problem, so here it is.

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

But with that I do get the error

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)

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

I came across this question trying to find a solution to the same issue after started using @apollo/react-hooks. As the formulation of error is the same, I will still provide my answer in case it helps somebody.

The error was a lack of ApolloHooksProvider around the content. I fixed it with changing this

<ApolloProvider client={client}>
    <Content />
</ApolloProvider>

to this

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

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

Method 2

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

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply