Create useApolloClient.ts

[danielkcz]

Checklist:

• If this PR is a new feature, please reference an issue where a consensus about the design was reached (not necessary for small changes)
• Make sure all of the significant new logic is covered by tests
• If this was a change that affects the external API used in GitHunt-React, update GitHunt-React and post a link to the PR in the discussion.

Quick fix for a leftover from context refactor so we can use it with hooks. I suppose tests are not needed for such a simple case?

[danielkcz]

Well, I am stumped now. With old @types/react this will never pass the tests. What is the preferred way of dealing with it? Just @ts-ignore or rather update types?

[hwillson]

@FredyC I'll be pushing updates shortly that update @types/react.

[hwillson]

@FredyC master now includes the most recent version of @types/react.

[danielkcz]

@hwillson Thanks. Looks like all is green, ready to merge :)

[hwillson]

Thanks for this @FredyC. Since this requires useContext, we're going to merge it into the release-3.0.0 branch shortly.

[danielkcz]

@hwillson That doesn't sound right...It should be in the master branch, that's why there was that check in case someone tries to use it without React 16.8. It would be a shame to have a new Context and unable to use it with Hooks. What if someone doesn't want to update to Apollo 3.0, but useApolloClient? At least export the ApolloContext if you don't want this for whatever reasons...

Besides, you already have React 16.8 in master, so I don't understand why such simple additive change could not be included there as well. It doesn't break anything until you actually use it.

[hwillson]

Thanks for the feedback @FredyC. Unfortunately, we don't want to introduce internal Hook use into react-apollo 2.x. The React 16.8 dependency in react-apollo 2.5 is a devDependency; we're actually supporting as far back as react 15 since it's a peerDependency (yes, we're supporting a 3 year old version of react 😱). We don't want to introduce further gated checks for React functionality (like checking to make sure people can use useContext) in react-apollo 2.x, since 3.0 is going to land very quickly, and will have its react peer dep set to 16.8. Gated checks for functionality are a pain to manage, and as an example, the check that was there was incorrect. It was checking to see if ApolloContext existed, which meant React.createContext could be used, which was released in react 16.3. Someone using react >= 16.3 but < 16.8 would have passed the check, only to have the call to useContext fail.

For now people who want to use the new context API in react-apollo 2.x (after the next patch release) will be able to using the ApolloConsumer component.

[notgiorgi]

the workaround for 2.x:

You need to wrap the ApolloConsumer into your own context:

// MyApolloContext.js
const MyApolloContext = React.createContext()

export const MyApolloContextProvider = ({ children }) => (
  <ApolloConsumer>
    {client => <MyApolloContext.Provider value={client}>{children}</MyApolloContext.Provider>}
  </ApolloConsumer>
)

export const useApolloClient = () => {
  return useContext(MyApolloContext)
}


// app.js
<ApolloProvider client={client}>
  <MyApolloContextProvider>
    <MyComponent />
  </MyApolloContextProvider>
<ApolloProvider>


// MyComponent.js
const MyComponent = () => {
    const client = useApolloClient()
    // ...
}

[TidyIQ]

@notgiorgi Your example doesn't work for me.

First, I get an error as no default value is provided to React.createContext(), then I get an error when I attempt to use client.query() in MyComponent saying Property 'query' does not exist on type '{}'