Aws-mobile-appsync-sdk-js: TypeError: Object(...) is not a function w/ Apollo Link State

[dmitryyankowski]

Trying to add in support for apollo-link-state via the new PR #96

However i'm getting the following error:

Followed example from https://github.com/awslabs/aws-mobile-appsync-sdk-js/issues/24#issuecomment-382066010

Any help would be appreciated!

[reggie3]

@lolcoolkat Do you have anything other than appSynchLink and stateLink in your link chain? I received a similar error (#103), and it was caused by a faulty link function. Things started working as expected (more or less) once I identified, and fixed the faulty module.

[dmitryyankowski]

@reggie3 here's my full code :)

import AWSAppSyncClient from 'aws-appsync'
import { createAppSyncLink, createLinkWithCache } from 'aws-appsync'
import { ApolloLink } from 'apollo-link'
import { onError } from 'apollo-link-error'
import { withClientState } from 'apollo-link-state'
import { Auth } from 'aws-amplify'
import { AUTH_TYPE } from 'aws-appsync/lib/link/auth-link'
import merge from 'lodash.merge'

import appSyncConfig from '../Appsync'

import todos from './resolvers/todos'
import visibilityFilter from './resolvers/visibilityFilter'
import types from './resolvers/types'

const onErrorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.map(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
      )
    )
  if (networkError) console.log(`[Network error]: ${networkError}`)
})

const stateLink = createLinkWithCache(cache =>
  withClientState({
    ...merge(todos, visibilityFilter),
    cache,
    types
  })
)

const appSyncLink = createAppSyncLink({
  url: appSyncConfig.graphqlEndpoint,
  region: appSyncConfig.region,
  auth: {
    type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
    jwtToken: async () =>
      (await Auth.currentSession()).getIdToken().getJwtToken()
  }
})

const link = ApolloLink.from([onErrorLink, stateLink, appSyncLink])

const client = new AWSAppSyncClient(
  {
    cacheOptions: {
      dataIdFromObject: obj =>
        obj.__typename && obj.id && `S:${obj.__typename}:${obj.id}`
    },
    disableOffline: true
  },
  { link }
)

export default client

It still doesn't work even if I remove the onErrorLink from the Apollo from link chain :/

[dmitryyankowski]

Figured out why it's not working. For some reason when I add/update the package it doesn't add the new commit #96 stuff. Still has the old client.js code... Does something need to be updated on npm?

[reggie3]

@lolcoolkat Hopefully, the new version will be published to NPM soon. Until, I forked and published an NPM package with @manueliglesias #96 stuff at aws-appsync-custom-link

[dmitryyankowski]

@reggie3 thanks for that! 😄 Hopefully they push the latest version to npm. Also getting another error in my console..

Are you getting this as-well?

[reggie3]

@lolcoolkat You got me there. I don't know what could be causing that problem. Your setup is more complicated than mine; for example, I'm not sending any options to AWSAppSyncClient. Here is my code just in case it helps:

import { ApolloProvider } from "react-apollo";
import AppSyncConfig from "./AppSync.json";
import AppComponent from "./AppComponent";
import React, { Component } from "react";
import { ApolloLink } from "apollo-link";
import { withClientState } from "apollo-link-state";
import AWSAppSyncClient, {
  createAppSyncLink,
  createLinkWithCache
} from "aws-appsync-custom-link";
import gql from "graphql-tag";
import { InMemoryCache } from "apollo-cache-inmemory";
import { onError } from "apollo-link-error";
import apolloLogger from "apollo-link-logger";
const util = require("util");

const logger = (operation, forward) => {
  debugger;

  const { operationName, query, variables, context } = operation;

  //create group
  console.log(operationName);
  // log operation
  console.log({
    operationName,
    variables,
    context,
    query
  });

  // make request
  return forward(operation).map(({ data, errors }) => {
    //log result
    console.log({ data, errors });
    console.groupEnd();
    return { data, errors };
  });
};

const onErrorLink = onError(({ graphQLErrors, networkError }) => {
  debugger;
  if (graphQLErrors)
    graphQLErrors.map(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
      )
    );
  if (networkError) console.log(`[Network error]: ${networkError}`);
});

const defaultState = {
  appState: {
    __typename: "AppState",
    geolocation: "null"
  }
};

// const cache = new InMemoryCache();

const stateLink = createLinkWithCache(cache =>
  withClientState({
    cache,
    resolvers: {
      Mutation: {
        updateGeolocation: (_, { geolocation }, { cache }) => {
          console.log("In mutation: ", geolocation);
          const query = gql`
            query updateGeolocation {
              appState @client {
                geolocation
              }
            }
          `;
          const previousState = cache.readQuery({ query });
          const data = {
            ... previousState,
            appState: {
              ...previousState.appState,
              geolocation
            }
          }
          console.log("Previous State: ", previousState);
          console.log("New State: ", data);
          return null;
        }
      }
    },
    defaults: defaultState
  })
);

// const linkThatUsesCache = createLinkWithCache((cache) => new MyLink(cache));

const appSyncLink = new createAppSyncLink({
  url: AppSyncConfig.graphqlEndpoint,
  region: AppSyncConfig.region,
  auth: {
    type: AppSyncConfig.authType,
    apiKey: AppSyncConfig.apiKey
  }
});

const link = ApolloLink.from([
  apolloLogger,
  onErrorLink,
  stateLink,
  appSyncLink
]);

const client = new AWSAppSyncClient({}, { link });

/* 
*** AWSAppSyncClient test ***
getResult = async () => {
  debugger;
  let result;
  try {
    const result = await client.mutate({
      mutation: gql`
        mutation updateNetworkStatus($isConnected: Boolean) {
          updateNetworkStatus(isConnected: $isConnected) @client {
            isConnected
          }
        }
      `,
      variables: { isConnected: true }
    });
    console.log(result);
  } catch (error) {
    debugger;
    console.log(error);
    return error;
  }
  debugger;
  return result;
};
getResult();
*/

class App extends Component {
  render() {
    return (
      <ApolloProvider client={client}>
        <AppComponent />
      </ApolloProvider>
    );
  }
}

export default App;

[manueliglesias]

Hey @lolcoolkat @reggie3

The changes have been published to npm, please let me know if you're still having problems