getting different data from db than in GraphiQL - reactjs

Question

I'm new to graphQL and mongoDB and I'm trying to make it work in my project. The problem is with data from query that in GraphiQL is completely different than data from the same query inside my client side. Here's my setup of schema:
const graphql = require('graphql');
const _ = require('lodash');
const Item = require('../models/item');
const {
GraphQLObjectType,
GraphQLString,
GraphQLSchema,
GraphQLID,
GraphQLInt,
GraphQLList
} = graphql;
const ItemType = new GraphQLObjectType({
name: 'Item',
fields: () => ({
name: {
type: GraphQLString
},
id: {
type: GraphQLID
},
description: {
type: GraphQLString
},
price: {
type: GraphQLInt
},
image: {
type: GraphQLString
},
category: {
type: GraphQLString
}
})
});
const RootQuery = new GraphQLObjectType({
name: 'RootQueryType',
fields: {
item: {
type: ItemType,
args: {
id: {
type: GraphQLID
}
},
resolve(parent, args) {
// code to get data from db / other source
return Item.findById(args.id);
}
},
items: {
type: new GraphQLList(ItemType),
resolve(parent, args) {
return Item.find({})
}
}
}
});
When im doing a query from graphiQL of all the itemes and data i'm receiving is the "right one". It looks like this:
When i'm doing the same exact query from the front-end like that:
import { gql } from "apollo-boost";
const getItemsQuery = gql`
{
items {
name
id
description
price
image
category
}
}
`;
export { getItemsQuery };
The data looks like this:
It looks like it is repeating first item over and over and i can't see why. DB is also showing right items. My server side code can be found here: https://github.com/KamilStaszewski/shoppy/tree/adding_graphQL/server

Answer 1

From the docs:
The InMemoryCache normalizes your data before saving it to the store by splitting the result into individual objects, creating a unique identifier for each object, and storing those objects in a flattened data structure. By default, InMemoryCache will attempt to use the commonly found primary keys of id and _id for the unique identifier if they exist along with __typename on an object.
In other words, Apollo will use both __typename and id to create a cache key for each Item you fetch. This key is used to fetch the appropriate item from the cache. The problem is that your items are returning null for their id. This results in each item being written with the same key. As a result, when your query result is returned from the cache, it looks up the same key for each item in your items array.
To fix this issue, you need to ensure that your API returns a value for id. I haven't worked with mongoose that much, but I think since mongoose adds an id field for you automatically based on the _id, it should be sufficient to just remove the id from your mongoose model (not your GraphQL type). Alternatively, you could try adding a resolve function to your id field in the GraphQL type:
resolve: (item) => item._id.toString()