GraphQL返回前端重复的数据(实际上不存在),但后端没有。

huangapple go评论70阅读模式
英文:

GraphQL returning duplicates (that don't exist) on the front end but not the back

问题

When using graphql sandbox to test data I query for from a MongoDB, multiple unique datapoints relevant to my query is returned, BUT when I use the same query on the front end I am given an array of one datapoint multiple times (equal to the number put inside .limit())

Query works fine on Mongo and apollo sandbox but not when called from the front end.

This is the relevant resolver:

players: async (parent, { id }) => {
  return Player.find({ id: id }).sort({ game_id: -1 }).limit(3);
},

These are the relevant typeDefs:

type Player {
  _id: ID
  game_id: Int
  id: String
  player_name: String
  PTS: Int
}

type Query {
  players(id: String): [Player]
}

This is the relevant query:

export const GET_PLAYER = gql`
  query Players($playersId: String) {
    players(id: $playersId) {
      _id
      game_id
      player_name
      PTS
    }
  }

When using this query in apollo sandbox with a relevant id, I get this array of data:

{
  "data": {
    "players": [
      {
        "_id": "63ea73d4297006c9dffa349a",
        "game_id": 401468894,
        "id": "4432158",
        "PTS": 23
      },
      {
        "_id": "63ea73d3297006c9dffa3463",
        "game_id": 401468888,
        "id": "4432158",
        "PTS": 21
      },
      {
        "_id": "63ea73d1297006c9dffa3387",
        "game_id": 401468870,
        "id": "4432158",
        "PTS": 12
      }
    ]
  }
}

THIS IS THE DATA I WANT ^^^^^^^^^^^^^^^^^^^^

But when calling on this query in the front end with useQuery like so:

const { loading, error, data, refetch } = useQuery(GET_PLAYER, { variables: { playersId: player } });

It gives me an array of 3 (my limit amount) of only the first object like so:

0
{
  __typename: 'Player',
  _id: '63ea73d3297006c9dffa3463',
  game_id: 401468888,
  id: '4432158',
  player_name: 'evan-mobley',
  ...
}
1
{
  __typename: 'Player',
  _id: '63ea73d3297006c9dffa3463',
  game_id: 401468888,
  id: '4432158',
  player_name: 'evan-mobley',
  ...
}
2
{
  __typename: 'Player',
  _id: '63ea73d3297006c9dffa3463',
  game_id: 401468888,
  id: '4432158',
  player_name: 'evan-mobley',
  ...
}

As you can see, they are all the same.

When I take the variable out of the resolver like so:

players: async (parent, { id }) => {
  return Player.find().sort({ game_id: -1 }).limit(3);
},

It fetches data how I would expect it to, but if I put any variable in that find operator, I get a list of 3 duplicates.

Other resolvers on the same page, with very similar functionality, but using a different collection work perfectly fine.

英文:

When using graphql sandbox to test data I query for from a MongoDB, multiple unique datapoints relevant to my query is returned, BUT when I use the same query on the front end I am given an array of one datapoint multiple times (equal to number put inside .limit())

Query works fine on Mongo and apollo sandbox but not when called from the front end.

This is the relevant resolver:

> players: async (parent, { id }) => {
> return Player.find({ id: id }).sort({ game_id: -1 }).limit(3);
>     },
> 

These are the relevant typeDefs

> type Player {
> _id: ID
> game_id: Int
> id: String
> player_name: String
> PTS: Int
>   }
> 
> type Query {
> players(id: String): [Player]
>   }

This is the relevant query

> export const GET_PLAYER = gql`
> query Players($playersId: String) {
> players(id: $playersId) {
> _id
> game_id
> player_name
> PTS
>        }
>      }
 

When using this query in apollo sandbox with a relevant id I get this array of data

> {
>   "data": {
>     "players": [
>       {
>         "_id": "63ea73d4297006c9dffa349a",
>         "game_id": 401468894,
>         "id": "4432158",
>         "PTS": 23
>       },
>         {
>         "_id": "63ea73d3297006c9dffa3463",
>         "game_id": 401468888,
>         "id": "4432158",
>         "PTS": 21
>       },
>       {
>         "_id": "63ea73d1297006c9dffa3387",
>         "game_id": 401468870,
>         "id": "4432158",
>         "PTS": 12
>       }
>     ]
>   }
> }
> 

THIS IS THE DATA I WANT^^^^^^^^^^^^^^^^^^^^

But when calling on this query in the front end with useQuery like so

const { loading, error, data, refetch } = useQuery(GET_PLAYER, { variables: { playersId:player}, });

It gives me an array of 3(my limit amount) of only the first object like so


> 0
> 
> {__typename: 'Player', _id: '63ea73d3297006c9dffa3463', game_id: 401468888, id: '4432158', player_name: 'evan-mobley', …}
> 1
> 
> {__typename: 'Player', _id: '63ea73d3297006c9dffa3463', game_id: 401468888, id: '4432158', player_name: 'evan-mobley', …}
> 2
> 
> {__typename: 'Player', _id: '63ea73d3297006c9dffa3463', game_id: 401468888, id: '4432158', player_name: 'evan-mobley', …}
> 

As you can see they are all the same

When I take the variable out of the resolver like so

> players: async (parent, { id }) => {
> return Player.find().sort({ game_id: -1 }).limit(3);
>     },

It fetches data how I would expect it to, but if I put any variable in that find operator, I get a list of 3 duplicates.

Other resolvers on same page, with very similar functionality, but using a different collection work perfectly fine

答案1

得分: 1

所以我找到了问题,是因为我的对象中有多个不是唯一标识符的属性 id。Apollo 将它们缓存为相同的,因为多个数据点具有相同的 "id"。

英文:

So I found the issue, it was because I had multiple properties id in my object that weren't unique identifiers. Apollo cached these as the same because multiple datapoints had the same "id"

huangapple
  • 本文由 发表于 2023年2月16日 07:47:48
  • 转载请务必保留本文链接:https://go.coder-hub.com/75466483.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定