Store error: the application attempted to write an object with no provided id but the store already contains an id of for this object

Question

Note - I'm quite new to GraphQL and I've seen other stackoverflow questions of this error being reported but they were using Apollo. Here, I am using AWS Amplify and AppSync's own GraphQL client. So I couldn't use those solutions.

tldr - I'm trying to fetch a list of items from the db, but I keep getting a cryptic Network error and a store error that I don't understand. Details:-

This is my client definition for the AWS Appsync Client:-

export const client = new AWSAppSyncClient({
  url: awsconfig.aws_appsync_graphqlEndpoint,
  region: awsconfig.aws_appsync_region,
  auth: {
    type: awsconfig.aws_appsync_authenticationType,
    jwtToken: async () =>
      (await Auth.currentSession()).getAccessToken().getJwtToken(),
  },
});

This is my query method:-

  listInstitutions = () => {
    client
      .query({
        query: queries.ListInstitutions,
      })
      .then((res: any) => {
        this.institutions = res.data.listInstitutions.items;
        console.log('this.institutions', this.institutions);
      })
      .catch((err) => {
        console.error(err);
        this.institutions = [];
      });
  };

This is my query definition:-

query ListInstitutions(
  $filter: ModelInstitutionFilterInput
  $limit: Int
  $nextToken: String
) {
  listInstitutions(filter: $filter, limit: $limit, nextToken: $nextToken) {
    items {
      id
      name
      location
      city
      website
      phone
      logo
      bio
      admins {
        id
        name
        title
        bio
        createdAt
        updatedAt
        owner
      }
      classes {
        nextToken
      }
      learners {
        nextToken
      }
      createdAt
      updatedAt
    }
    nextToken
  }
}

The error in the console looks like this:-

 Error: Network error: Error writing result to store for query:
 query ListInstitutions($filter: ModelInstitutionFilterInput, $limit: Int, $nextToken: String) {
  listInstitutions(filter: $filter, limit: $limit, nextToken: $nextToken) {
    items {
      id
      name
      location
      city
      website
      phone
      logo
      bio
      admins {
        id
        name
        title
        bio
        createdAt
        updatedAt
        owner
        __typename
      }
      classes {
        nextToken
        __typename
      }
      learners {
        nextToken
        __typename
      }
      createdAt
      updatedAt
      __typename
    }
    nextToken
    __typename
  }
}

Store error: the application attempted to write an object with no provided id but the store already contains an id of ModelInstitutionConnection:undefined for this object. The selectionSet that was trying to be written is:
listInstitutions(filter: $filter, limit: $limit, nextToken: $nextToken) {
  items {
    id
    name
    location
    city
    website
    phone
    logo
    bio
    admins {
      id
      name
      title
      bio
      createdAt
      updatedAt
      owner
      __typename
    }
    classes {
      nextToken
      __typename
    }
    learners {
      nextToken
      __typename
    }
    createdAt
    updatedAt
    __typename
  }
  nextToken
  __typename
}
    at new ApolloError (ApolloError.js:37)
    at QueryManager.js:326
    at QueryManager.js:698
    at Array.forEach (<anonymous>)
    at QueryManager.js:697
    at Map.forEach (<anonymous>)
    at QueryManager.push.lq9a.QueryManager.broadcastQueries (QueryManager.js:692)
    at QueryManager.js:275
    at ZoneDelegate.invoke (zone-evergreen.js:372)
    at Object.onInvoke (core.js:28510)

I have to note that this error vanishes when I add the cacheOptions configuration to the AWS Appsync client definition, like so:-

export const client = new AWSAppSyncClient({
  url: awsconfig.aws_appsync_graphqlEndpoint,
  region: awsconfig.aws_appsync_region,
  auth: {
    type: awsconfig.aws_appsync_authenticationType,
    jwtToken: async () =>
      (await Auth.currentSession()).getAccessToken().getJwtToken(),
  },
     cacheOptions: {
       dataIdFromObject: (obj: any) => `${obj.__typename}:${obj.myKey}`,
     },
});

But even though the error goes away, it doesn't actually fetch the items from the dynamoDB. It just always returns an empty array.

I don't know why I'm getting this kind of an error even though all of my graphql code is autogenerated using the aws amplify-cli and I'm following the approach as seen in the documentation

I just want the query to fetch the items from the database. What should I do?

Answer 1

I figured it out. The issue was in the GraphQL Schema definition where I had set the @auth paramter to only allow a certain admin to access the list, that's why I was getting back an empty array. I suppose this particular error was caused by me not leaving in the cacheoptions in the client definition. The cacheoptions as specified at the end of the question will fix this issue.