Unable to import raw Context object to use with React Hooks

[singhsamyak]

Intended outcome:

Importing the raw Context object like this should be possible:

import { ApolloContext } from "react-apollo"

Why do I need the raw Context?

The useContext hook requires a Context object (returned from createContext) as its parameter.

This is the the intended use:

const apolloClient = useContext(ApolloContext)

Actual outcome:

Only the wrapped ApolloProvider and ApolloConsumer can be imported individually, which cannot be supplied to the useContext hook.

This is how I'm importing them now:

import { ApolloProvider, ApolloConsumer } from "react-apollo"

This is how I'm passing it to useContext:

const apolloClient = useContext({
    Provider: ApolloProvider,
    Consumer: ApolloConsumer 
})

This results in apolloClient being undefined when trying to invoke watchQuery like this:

return apolloClient.watchQuery(...);

and throws a TypeError:

Uncaught (in promise) TypeError: Cannot read property 'watchQuery' of undefined

How to reproduce the issue:

1. Upgrade to react-apollo@^3.0.0-alpha.0
2. Import the ApolloProvider and ApolloConsumer as described above
3. Pass them into useContext as described above
4. Try to invoke functions exposed by apolloClient

Version

• [email protected]
• [email protected]

[rosskevin]

Duplicates and related:
#2539
#2540
#1937

[cmonacaps]

https://www.apollographql.com/docs/react/api/react-apollo/#apolloconsumer