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

Question

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)

score 7 · Answer 1 · answered Nov 01 '19 at 10:20

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>

Please note, that for `react-apollo` >= v3.*, you don't need to wrap your `Content` inside of `ApolloHooksProvider` at all — Vladyslav Zavalykhatko, May 28 '20 at 13:37

Oblosys · Accepted Answer · 2019-08-08T16:47:04.127

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

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

2 Answers2

Linked