Apollo-client: Typescript definition problems with apollo-client@next and link-core / cache-core

[lordnox]

Code in question:

import ApolloClient from 'apollo-client'
import HttpLink from 'apollo-link-http'
import InMemoryCache from 'apollo-cache-inmemory'

const link = new HttpLink({
  uri: 'https://graphql-pokemon.now.sh',
})

const cache = new InMemoryCache()

export const client = new ApolloClient({
  cache,
  link,
})

Intended outcome:
This code is mostly copied from apollo-client-preset and I expected it to work out of the box. I might be missing some parameters for the cache, but typescript did not like the code even without the cache

Actual outcome:
Typescript complains about:

• Types of property 'cache' are incompatible
  Type 'InMemoryCache' is not assignable to type 'ApolloCache<{}>
  Property 'write' is missing in type 'InMemoryCache'.

How to reproduce the issue:
The code in the beginning should produce the error

Version

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

[jbaxleyiii]

@lordnox can you try with the latest betas?

Also the Cache will need a type of the store now

[katopz]

In my case

package.json

  "dependencies": {
    "apollo-client-preset": "^0.2.0-beta.8",
    "react": "^16.0.0",
    "react-apollo": "^2.0.0-beta.0",
    "react-dom": "^16.0.0",
    "react-scripts-ts": "2.7.0",
    "redux": "^3.7.2"
  },
  "devDependencies": {
    "@types/jest": "^21.1.2",
    "@types/node": "^8.0.34",
    "@types/react": "^16.0.10",
    "@types/react-dom": "^16.0.1"
  }

index.tsx

import * as React from 'react';
import { render } from 'react-dom';

import ApolloClient from 'apollo-client';
import { HttpLink, InMemoryCache } from 'apollo-client-preset';
import { ApolloProvider } from 'react-apollo';

import App from './App';

const GRAPHQL_END_POINT = 'SOME_ENDPOINT';

const client = new ApolloClient({
  link: new HttpLink({ uri: GRAPHQL_END_POINT }),
  cache: (new InMemoryCache()).restore({})
});

const WrappedApp = (
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>
);

render(WrappedApp, document.getElementById('root'));

Error

(22,21): error TS2322: Type '{ client: ApolloClient<NormalizedCache>; children: Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<ApolloProvider> & Readonly<{ children?: ReactNode;...'.
  Type '{ client: ApolloClient<NormalizedCache>; children: Element; }' is not assignable to type 'Readonly<ProviderProps<Cache>>'.
    Types of property 'client' are incompatible.
      Type 'ApolloClient<NormalizedCache>' is not assignable to type 'ApolloClient<Cache>'.
        Type 'NormalizedCache' is not assignable to type 'Cache'.
          Property 'add' is missing in type 'NormalizedCache'.

[mzygmunt]

@katopz The same error with version apollo-client 2.0.1 and react-apollo 2.0.0

[Jannis]

This seems closely related (or identical even) to https://github.com/apollographql/react-apollo/issues/1299.

[jbaxleyiii]

Looks like someone took a stab at it here which I'm working to release asap! Hopefully it fixes these issues!

[prencher]

Is there any traction on this? We just tried to upgrade our codebase today and ran into this with the latest versions.

@jbaxleyiii I don't see how the ApolloProvider change would address this. The issue is with ApolloClient and InMemoryCache.

[alvis]

@prencher the code in #1319 hasn't released yet, so that may be the reason the issue remains. May be you can try the master version for now. Disclaimer: I haven't tried it yet.

[iamclaytonray]

@jbaxleyiii - Any word on when this will be released?

[katopz]

@iamclaytonray Seem working for me now, do try here https://github.com/katopz/apollo-client-preset-ts-example

[evenfrost]

Any update on this?

[iamclaytonray]

I can verify that the latest release fixes this problem. (Probably the release before latest as well. I haven't touched that project in about a couple of months.)

[hwillson]

This issue has been resolved (verified with apollo-client 2.3.1). Thanks!