【问题标题】:Unable to fetch list in react relay无法在反应中继中获取列表
【发布时间】:2016-12-10 19:00:36
【问题描述】:

我遵循与提到的here相同的架构

我想获取所有用户,所以我像这样更新了我的架构

var Root = new GraphQLObjectType({
  name: 'Root',
  fields: () => ({
    user: {
      type: userType,
      resolve: (rootValue, _) => {
        return getUser(rootValue)
      }
    },
    post: {
      type: postType,
      args: {
         ...connectionArgs,
          postID: {type: GraphQLString}
        },
      resolve: (rootValue, args) => {
       return getPost(args.postID).then(function(data){
        return data[0];
       }).then(null,function(err){
        return err;
       });
      }
    },

    users:{
      type: new GraphQLList(userType),
      resolve: (root) =>getUsers(),
    },
  })
});

在database.js中

export function getUsers(params) {
  console.log("getUsers",params)
  return new Promise((resolve, reject) => {
      User.find({}).exec({}, function(err, users) {
        if (err) {
          resolve({})
        } else {
          resolve(users)
        }
      });
  })
}

我在 /graphql 中得到结果

{
  users {
    id,
    fullName
  } 
}

结果为

{
  "data": {
    "users": [
      {
        "id": "VXNlcjo1Nzk4NWQxNmIwYWYxYWY2MTc3MGJlNTA=",
        "fullName": "Akshay"
      },
      {
        "id": "VXNlcjo1Nzk4YTRkNTBjMWJlZTg1MzFmN2IzMzI=",
        "fullName": "jitendra"
      },
      {
        "id": "VXNlcjo1NzliNjcyMmRlNjRlZTI2MTFkMWEyMTk=",
        "fullName": "akshay1"
      },
      {
        "id": "VXNlcjo1NzliNjgwMDc4YTYwMTZjMTM0ZmMxZWM=",
        "fullName": "Akshay2"
      },
      {
        "id": "VXNlcjo1NzlmMTNkYjMzNTNkODQ0MmJjOWQzZDU=",
        "fullName": "test"
      }
    ]
  }
}

但是如果我尝试在视图中获取这个

export default Relay.createContainer(UserList, {
  fragments: {
    userslist: () => Relay.QL`
      fragment on User @relay(plural: true) {
            fullName,
            local{
              email
            },
            images{
              full
            },
            currentPostCount,
            isPremium,
      }
    `,
  },
});

我收到错误Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.

请告诉我我缺少什么。 无论有没有@relay(复数:true),我都尝试了很多。 还尝试将带有参数的架构更新为

    users:{
      type: new GraphQLList(userType),
      args: {
        names: {
          type: GraphQLString,
        },
        ...connectionArgs,
      },
      resolve: (root, {names}) =>connectionFromArray(getUsers(names)),
    },

但我收到错误Cannot read property 'after' of undefined in implementing react-relay 提前致谢。

【问题讨论】:

  • 你在哪里定义userslist
  • 我在 routes.js 中定义了用户列表
  • Relay.ql'{用户}
  • 正如错误提示的那样,您是否尝试过非缩小的开发环境并得到详细的错误消息?
  • 我收到消息 Invariant Violation: RelayOSSNodeInterface: Expected payload for root field users 是单个非数组结果,而是收到一个包含 5 个结果的数组

标签: node.js reactjs relay


【解决方案1】:

Relay 目前只支持三种类型的根字段(见facebook/relay#112):

  • 不带参数的根字段,返回单个节点:
    • 例如{ user { id } }返回{"id": "123"}
  • 带有一个参数的根字段,返回单个节点:
    • 例如{ post(id: "456") { id } }返回{"id": "456"}
  • 带有一个数组参数的根字段返回与参数数组大小相同的节点数组(也称为“复数标识根字段”):
    • 例如{ users(ids: ["123", "321"]) { id } } 返回[{"id": "123"}, {"id": "321"}]

一种解决方法是创建一个根字段(通常称为viewer),返回具有这些字段的节点。当嵌套在Viewer(或任何其他节点)内时,允许字段具有任何返回类型,包括列表或连接。当您在 GraphQL 服务器中包装了此对象中的字段后,您可以像这样查询它们:

{
  viewer {
    users {
      id,
      fullName,
    }
  }
}

Viewer 类型是一个节点类型,因为它只有一个实例,所以它的id 应该是一个常量。您可以使用 globalIdField 帮助器来定义 id 字段,并添加您想要使用 Relay 查询的任何其他字段:

const viewerType = new GraphQLObjectType({
  name: 'Viewer',
  interfaces: [nodeInterface],
  fields: {
    id: globalIdField('Viewer', () => 'VIEWER_ID'),
    users:{
      type: new GraphQLList(userType),
      resolve: (viewer) => getUsers(),
    },
  },
});

在客户端上,您需要将路由中的根查询更改为 { viewer } 并在 Viewer 上定义片段:

export default Relay.createContainer(UserList, {
  fragments: {
    viewer: () => Relay.QL`
      fragment on Viewer {
        users {
          fullName,
          local {
            email,
          },
          images {
            full,
          },
          currentPostCount,
          isPremium,
        }
      }
    `,
  },
});

【讨论】:

  • 查看器在我的架构中应该是什么样子?
  • @akshay 我现在在我的答案中添加了一个示例 Viewer 类型定义。
  • 谢谢它像魅力一样..:-)
猜你喜欢
  • 2019-04-24
  • 2017-11-27
  • 2022-01-24
  • 1970-01-01
  • 2021-09-14
  • 1970-01-01
  • 1970-01-01
  • 2016-05-02
  • 2016-02-02
相关资源
最近更新 更多