reactjs - I try to implement a connection using relay and all the node's IDs are the same

Question

I write a really simple schema using graphql, but some how all the IDs in the edges are the same.

{
    "data": {
        "imageList": {
            "id": "SW1hZ2VMaXN0Og==",
            "images": {
                "edges": [
                  {
                      "node": {
                          "id": "SW1hZ2U6",
                          "url": "1.jpg"
                      }
                  },
                  {
                      "node": {
                          "id": "SW1hZ2U6",
                          "url": "2.jpg"
                      }
                  },
                  {
                      "node": {
                          "id": "SW1hZ2U6",
                          "url": "3.jpg"
                      }
                  }
                ]
            }
        }
    }
}

I posted the specific detail on github here's the link.

Answer 1

因此，globalIdField 期望您的对象有一个名为“id”的字段。然后它将您传递给 globalIdField 的字符串并添加一个 ':' 和您的对象的 id 以创建其全局唯一 id。

如果您的对象没有一个名为“id”的字段，那么它不会附加它，并且您的所有 globalIdField 将只是您传入的字符串和“：”。所以它们不会是唯一的，它们都是一样的。

您可以将第二个参数传递给 globalIdField，它是一个获取对象并返回 id 供 globalIdField 使用的函数。因此，假设您的对象的 id 字段实际上称为“_id”（感谢 Mongo！）。你可以这样调用 globalIdField：

id: globalIdField('Image', image => image._id)

你去吧。中继享受的唯一 ID。

以下是 graphql-relay-js 中相关源代码的链接：https ://github.com/graphql/graphql-relay-js/blob/master/src/node/node.js#L110

Answer 2

在浏览器控制台中粘贴以下代码

atob('SW1hZ2U6')

你会发现id的值是“Image:”。

这意味着获取的记录的所有 id 属性(new MyImages()).getAll() 都是空的。

返回 union ids 或者我建议你将图像定义为 GraphQLList

var ImageListType = new GraphQL.GraphQLObjectType({
  name: 'ImageList',
  description: 'A list of images',
  fields: () => ({
    id: Relay.globalIdField('ImageList'),
    images: {
      type: new GraphQLList(ImageType),
      description: 'A collection of images',
      args: Relay.connectionArgs,
      resolve: (_, args) => Relay.connectionFromPromisedArray(
        (new MyImages()).getAll(),
        args
      ),
    },
  }),
  interfaces: [nodeDefinition.nodeInterface],
});