How to implement AWS AppSync and Amplify?

[Diusha]

Hi @lemol , I'm trying to implement AWS AppSync and Amplify with your plugin but out of luck. Can you add an example of how to implement it properly?

This is how I've implemented it now:

import Amplify from 'aws-amplify';
import AWSAppSyncClient from 'aws-appsync';
import awsmobile from '@/aws-exports';

Amplify.configure(awsmobile);

const client = new AWSAppSyncClient({
  url: awsmobile.aws_appsync_graphqlEndpoint,
  region: awsmobile.aws_appsync_region,
  disableOffline: true,
  auth: {
    type: awsmobile.aws_appsync_authenticationType,
    apiKey: awsmobile.aws_appsync_apiKey,
  },
});

...

export const extraLinks = [client];

Thx

[Diusha]

This is the error that I get in console:

bundle.esm.js:34 Uncaught (in promise) TypeError: Cannot read property 'length' of undefined
    at isTerminating (bundle.esm.js:34)
    at concat (bundle.esm.js:153)
    at StateLink../node_modules/apollo-link/lib/bundle.esm.js.ApolloLink.concat (bundle.esm.js:175)
    at bundle.esm.js:126
    at Array.reduce (<anonymous>)
    at Function.from (bundle.esm.js:126)
    at Module../src/pages/.umi/apollo/index.js (index.js:66)
    at __webpack_require__ (bootstrap:774)
    at fn (bootstrap:129)
    at Module../src/pages/.umi/router.js (polyfills.js:6)
    at __webpack_require__ (bootstrap:774)
    at fn (bootstrap:129)
    at _callee$ (umi.js:42)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)
    at asyncToGenerator.js:32
    at new Promise (<anonymous>)
    at asyncToGenerator.js:21
    at clientRender (umi.js:33)
    at runtimePlugin.js:89
    at umi.js:81

[lemol]

Hi @Diusha ,

I think you have to export the client instead of export const extraLinks:

export const makeClient = () => client;

Can you please give a try?

[Diusha]

Hi @lemol ,

I have this error now:

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

react-hooks.esm.js:265 Uncaught TypeError: this.currentObservable.query.getCurrentResult is not a function
    at QueryData../node_modules/@apollo/react-hooks/lib/react-hooks.esm.js.QueryData.getQueryResult (react-hooks.esm.js:265)
    at QueryData._this.getExecuteResult (react-hooks.esm.js:73)
    at QueryData../node_modules/@apollo/react-hooks/lib/react-hooks.esm.js.QueryData.execute (react-hooks.esm.js:106)
    at react-hooks.esm.js:380
    at useDeepMemo (react-hooks.esm.js:354)
    at useBaseQuery (react-hooks.esm.js:380)
    at useQuery (react-hooks.esm.js:399)
    at Welcome (Welcome.tsx:8)
    at renderWithHooks (react-dom.development.js:16320)
    at mountIndeterminateComponent (react-dom.development.js:18735)
    at beginWork$1 (react-dom.development.js:20084)
    at HTMLUnknownElement.callCallback (react-dom.development.js:362)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:411)
    at invokeGuardedCallback (react-dom.development.js:466)
    at beginWork$$1 (react-dom.development.js:25730)
    at performUnitOfWork (react-dom.development.js:24638)
    at workLoopSync (react-dom.development.js:24614)
    at performSyncWorkOnRoot (react-dom.development.js:24182)
    at react-dom.development.js:12238
    at unstable_runWithPriority (scheduler.development.js:815)
    at runWithPriority$2 (react-dom.development.js:12188)
    at flushSyncCallbackQueueImpl (react-dom.development.js:12233)
    at flushSyncCallbackQueue (react-dom.development.js:12221)
    at scheduleUpdateOnFiber (react-dom.development.js:23601)
    at Object.enqueueSetState (react-dom.development.js:14029)
    at DynamicComponent../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:335)
    at dynamic.js:91

Maybe it has to do something with Rehydrated? Since in examples it used like this:

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

export default WithProvider;

[Diusha]

@lemol

It looks like there is some issues with AppSync apollo client version. So "forcing" Apollo version via resolution section in package.json and using "makeClient" solved the issue.

"resolutions": {
    "apollo-client": "^2.6.8",
  },

import AWSAppSyncClient from 'aws-appsync';
import awsmobile from '@/aws-exports';

const client = new AWSAppSyncClient({
  url: awsmobile.aws_appsync_graphqlEndpoint,
  region: awsmobile.aws_appsync_region,
  auth: {
    type: awsmobile.aws_appsync_authenticationType,
    apiKey: awsmobile.aws_appsync_apiKey,
  },
});
export const makeClient = () => client;