apollo-client dependency is outdated; causes TypeScript errors

[ffxsam]

I'm getting the following TS error:

ERROR in /Volumes/SuperData/Sites/reelcrafter/reelcrafter-ui/src/bootstrap/apollo.ts
20:3 Type 'AWSAppSyncClient<NormalizedCacheObject>' is missing the following properties from type 'ApolloClient<any>': clearStoreCallbacks, clientAwareness, stop, onClearStore
    18 |
    19 | export const apolloProvider = new VueApollo({
  > 20 |   defaultClient: client,
       |   ^
    21 | });
    22 |

AppSync works fine when it uses its own version of apollo-client that it depends on. But vue-apollo requires us to run yarn add apollo-client which installs a newer version that causes AppSync's types to break.

[elorzafe]

@ffxsam this worked for vue-apollo before, Maybe that was breaking change from them, can you paste you package.json to reproduce the issue? Thanks!

[ffxsam]

Hey @elorzafe! I actually stopped using Apollo in favor of AppSync's own methods for queries/mutations/etc. Here's the package.json from back when I was still using vue-apollo though:

  "dependencies": {
    "apollo-client": "^2.4.13",
    "apollo-link": "^1.2.8",
    "aws-amplify": "^1.1.19",
    "aws-appsync": "^1.7.1",
    "buefy": "^0.7.2",
    "change-case": "^3.1.0",
    "graphql": "^14.1.1",
    "graphql-tag": "^2.10.1",
    "lodash": "^4.17.11",
    "uuid": "^3.3.2",
    "vue": "^2.5.21",
    "vue-apollo": "^3.0.0-beta.28",
    "vue-i18n": "^8.0.0",
    "vue-router": "^3.0.1",
    "vuelidate": "^0.7.4",
    "vuex": "^3.0.1",
    "vuex-persistedstate": "^2.5.4"
  },

[elorzafe]

Thanks @ffxsam, let me know if you need anything else.

[tallpants]

Happening on React too, on the line:

<ApolloProvider client={appSyncClient}>
  ...
</ApolloProvider>

Type 'AWSAppSyncClient<any>' is missing the following properties from type 'ApolloClient<{}>': typeDefs, clearStoreCallbacks, clientAwareness, localState, and 6 more. ts(2740)

ApolloProvider.d.ts(6, 5): The expected type comes from property 'client' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<ApolloProvider<{}>> & Pick<Readonly<ApolloProviderProps<{}>> & Readonly<{ children?: ReactNode; }>, "client" | "children"> & Pick<...> & Pick<...>'

This is with versions:

"aws-appsync": "^1.7.2",
"aws-appsync-react": "^1.2.7",
"react-apollo": "^2.5.3",

[tallpants]

Looks to be related to https://github.com/awslabs/aws-mobile-appsync-sdk-js/issues/166 afaik @elorzafe (since it's the same error after all)

[jgunnink]

Also had this problem. We resolved it by doing this. Yes it's a hack, but at least you can get by until the issue is resolved. 😄

Given this appsync config:

const client = new AWSAppSyncClient({
  url: process.env.REACT_APP_AWS_APPSYNC_GRAPHQLENDPOINT as string,
  region: process.env.REACT_APP_AWS_APPSYNC_REGION as string,
  auth: {
    type: AUTH_TYPE.OPENID_CONNECT,
    jwtToken: () => getUser().token,
  },
});

And then doing:

<ApolloProvider client={client as any}>

[undefobj]

Hello everyone - I want to reply and assure you that we have not abandoned support of this project. Per my earlier comment, this is a complex process and to be completely transparent there are things in the Apollo library that are out of our control and there have also been breaking changes in Apollo versions which we're trying to account for, which is also why we pinned the version. We've been spending many hours trying to account for this but it's not simple to solve. After putting more thought into this we've got some initial solutions that I hope will unblock many of you. What we've done is packaged two of the "Links" which are part of the SDK - the Auth and Subscription Links - and published them to NPM. This will allow you to include them in the newer Apollo versions if you wish to use the newer features. This does not include the "Offline Link" for offline support which is more complex to solve and we're looking into for the future.

Installation of the links:

npm install aws-appsync-auth-link aws-appsync-subscription-link

Usage: https://github.com/awslabs/aws-mobile-appsync-sdk-js#using-authorization-and-subscription-links-with-apollo-client-no-offline-support

With is I would then give the following recommendations for choosing your client strategy:

1. If you do not have offline use cases, you can either use the Auth & Subscription Links above with the latest Apollo client or alternatively use the Amplify GraphQL client instead of Apollo:https://aws-amplify.github.io/docs/js/api#amplify-graphql-client
2. If you do have offline use cases please use the current version as-is with the older Apollo version. We're still working on a future strategy for the Offline Link.

Please let us know if you have any trouble using these links or if there is a scenario which we haven't accounted for here.