AWS AppSync + React-Apollo Query/useQuery raising exception this.currentObservable.query.getCurrentResult is not a function

Question

I'm new to GraphQL/Apollo thing and I'm having a hard time to setup it with a React application.

I have a React component that loads a list from a GraphQL API built using Amplify/AppSync.

If I call manually to fetch the items, i.e:

    const videosData = await client.query({
      query: gql(queries.listVideos)
    });
    const videosItems = videosData.data.listVideos.items;
    setVideosData(videosItems);

Works like a charm. However, if I try to use Apollo Query component or useQuery hook, it raises the following error:

TypeError: this.currentObservable.query.getCurrentResult is not a function

If I just add the line to fetch the query using a hook it already gives me this error

the hook call:

const {loading, error, data, refetch} = useQuery(gql(queries.listVideos));

The called function raising the issue:

QueryData.getQueryResult
node_modules/@apollo/react-hooks/lib/react-hooks.esm.js:325
  322 |     called: true
  323 |   });
  324 | } else {
> 325 |   var currentResult = this.currentObservable.query.getCurrentResult();
      | ^  326 |   var loading = currentResult.loading,
  327 |       partial = currentResult.partial,
  328 |       networkStatus = currentResult.networkStatus,

The exact same problem happens if I use the <Query> component

Packages versions:

"aws-amplify": "^1.1.30",
"aws-amplify-react": "^2.3.10",
"aws-appsync": "^1.8.1",
"graphql-tag": "^2.10.1",
"react-apollo": "^3.0.1",

Any idea what I might be doing wrong and how to fix it?

@BrianMcDonough Not yet... tbh I ended up with so many issues for setup this serverless graphql api and little support that I'm thinking about getting back to the good and old REST server — dfranca
– dfranca, Commented Sep 6, 2019 at 7:13

Nahuel Veron · Accepted Answer · 2019-09-12 23:56:32Z

9

If you add:

"resolutions": {
  "apollo-client": "2.6.3"
}

In your package.json and reinstall it should work.

You might see this warning:

Resolution field "[email protected]" is incompatible with requested version "[email protected]"

it is because Appsync is relying on a old version of react-apollo, but I've found that is working fine.

You could follow this issue which hopefully will be resolved soon and we'll not need to do this anymore.

answered Sep 12, 2019 at 23:56

Nahuel Veron

5326 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jesper Bylund Over a year ago

This doesn't work. The issue referenced in the answer is still open and vividly debated.

Guille Acosta · Accepted Answer · 2020-04-29 20:04:04Z

5

As mentioned in other answer the problem is because aws-appsync is relying in an previous version apollo-client. Using resolutions is not the "cleaner" way to solve this problem as you're fixing a dependency version which is not fully compatible with this library.

I strongly recommend you to create a custom apollo client for AWS AppSync this way:

import { ApolloProvider } from '@apollo/react-hooks';
import { ApolloLink } from 'apollo-link';
import { createAuthLink } from 'aws-appsync-auth-link';
import { createHttpLink } from 'apollo-link-http';
import { AppSyncConfig } from '.aws-exports';
import ApolloClient from 'apollo-client';
import { InMemoryCache } from "apollo-cache-inmemory";

const url = AppSyncConfig.graphqlEndpoint;
const region = AppSyncConfig.region;
const auth = {
  type: AppSyncConfig.authenticationType,
  apiKey: AppSyncConfig.apiKey
};
const link = ApolloLink.from([
   createAuthLink({ url, region, auth }), 
   createHttpLink({ uri: url })
]);
const client = new ApolloClient({
  link,
  cache: new InMemoryCache()
});

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

export default WithProvider

I also created a more detailed post on medium

edited Apr 29, 2020 at 20:04

answered Apr 22, 2020 at 21:12

Guille Acosta

2,22229 silver badges37 bronze badges

6 Comments

sigmus Over a year ago

This works, thanks!!! I used with jwtToken auth (Cognito). Maybe add in your answer the missing import { InMemoryCache } from "apollo-cache-inmemory";

Guille Acosta Over a year ago

Glad it worked for you @sigmus. I noticed and fixed it on my post but I forgot to do the same here, thanks!

Satvik Daga Over a year ago

@GuilleAcosta Great solution thanks. Just a quick question, how to make it work with subscriptions?

Guille Acosta Over a year ago

@SatvikDaga are you having issues to subscribe? which error are you getting? did you follow these steps? apollographql.com/docs/react/data/subscriptions

Satvik Daga Over a year ago

@GuilleAcosta I followed the steps but got an error. Using a createSubscriptionHandshakeLink solved it

|

Collectives™ on Stack Overflow

AWS AppSync + React-Apollo Query/useQuery raising exception this.currentObservable.query.getCurrentResult is not a function

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related