React-apollo: Typescript Error: Types of property 'client' are incompatible

[dlindenkreuz]

Steps to Reproduce

import ApolloClient, { createNetworkInterface } from "apollo-client"
import { ApolloProvider } from "react-apollo"

const client = new ApolloClient({
  networkInterface: createNetworkInterface({ uri: "/graphql" }),
})
const store = createStore(combineReducers({
  ...reducers,
  apollo: client.reducer(),
}), {}, applyMiddleware(client.middleware()))

ReactDOM.render(
    <ApolloProvider store={store} client={client}>
//                                        ^ error TS2322, see below
      <Layout />
    </ApolloProvider>,
    document.getElementById("root") as HTMLElement,
)

Buggy Behavior

During setup of react-apollo and apollo-client, typescript throws the following error (highlights by me):

TS2322: Type '{ store: Store<{}>; client: ApolloClient; children: Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode;...'.
Type '{ store: Store<{}>; client: ApolloClient; children: Element; }' is not assignable to type 'Readonly'.
Types of property 'client' are incompatible.
Type 'ApolloClient' is not assignable to type 'ApolloClient'. Two different types with this name exist, but they are unrelated.

src/index.tsx(22,21): error TS2322: Type '{ store: Store<{}>; client: ApolloClient; children: Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode;...'.
Type '{ store: Store<{}>; client: ApolloClient; children: Element; }' is not assignable to type 'Readonly'.
Types of property 'client' are incompatible.
Type 'ApolloClient' is not assignable to type 'ApolloClient'. Two different types with this name exist, but they are unrelated.
Types of property 'queryManager' are incompatible.
Type 'QueryManager' is not assignable to type 'QueryManager'. Two different types with this name exist, but they are unrelated.
Types of property 'scheduler' are incompatible.
Type 'QueryScheduler' is not assignable to type 'QueryScheduler'. Two different types with this name exist, but they are unrelated.
Types have separate declarations of a private property 'pollingTimers'.

Expected Behavior

Typescript should be fine with the above code. The error did not occur with [email protected] and [email protected]. I guess it just boils down to [email protected] and react-apollo not having matching type defs.

Version

• [email protected]
• [email protected]
• [email protected]

Workaround

(duh)

- <ApolloProvider store={store} client={client}>
+ <ApolloProvider store={store} client={client as any}>

[jbaxleyiii]

This is now fixed via 1.4.0! You will need to update apollo-client to the same version!

[dlindenkreuz]

Dope. Congrats on the release, the new TypeScript annotations arrived just in time!

[cramhead]

I'm seeing this exact problem with

• "react-apollo": "^2.5.6"
• "apollo-client": "^2.6.0-rc.3"
• "typescript": "3.5.1"

[chrisbchrist]

Same problem with most recent versions. Any workarounds/plans to fix this?

[sprazzeus]

Slightly different but similar Typescript error:
Property 'client' does not exist on type '{ children?: ReactNode; }'. TS2339

Versions used:

"react-apollo": "^3.1.5"
"apollo-client": "^2.6.10"
"typescript": "~3.7.2"

Code snippet:

const HelloUser = compose(withApollo)(({ client }) => {
  const auth = useAuth();
  const logout = async () => {
    await client.clearStore();

    auth.authClient.logout();
  };

  return (
    <Query query={CURRENT_USER_QUERY}>
      {({ loading, data }) => {
        if (loading) {
          return <p>Loading...</p>;
        }

        return (
          <div>
            <p>Hello {data.user.email}!</p>
            <button type="button" onClick={logout}>
              Logout
            </button>
          </div>
        );
      }}
    </Query>
  );
});