故事书的模拟数据生成

Question

我正在尝试使用故事书的中继生成模拟数据。我的查询是

const QUERY_LIST = graphql`
  query modelControllerAllUsersQuery @relay_test_operation {
    allUsers {
      pageInfo {
        hasNextPage
      }
      edges {
        node {
          id
          firstName
          lastName
        }
      }
    }
  }
`

并提供 RelayEnvironmentProvider 作为故事的装饰器。我正在尝试 return 使用自定义模拟解析器为我的查询设置一些默认值。

  const customMockResolvers = {
    ...mockResolvers,
    allUsers:() => ({
      pageInfo:{
        hasNextPage:false,
      },
      edges:[
        {
          node:{
            id       :'id',
            firstName:'fname',
            lastName :'lname',
          },
        },
      ],
    }),
  };

并将其称为

(operation) => MockPayloadGenerator.generate(operation, customMockResolvers)

我似乎无法获得默认值 returned。目前，它是 returning

{"allUsers":{"pageInfo":{"hasNextPage":false},"edges":[{"node":{"id":"<UserNode-mock-id-1>","firstName":"<mock-value-for-field-\"firstName\">","lastName":"<mock-value-for-field-\"lastName\">"}}]}}

我做错了什么？

Answer 1

使用 @relay-test-operation 时，customMockResolvers 对象中的键必须与字段的类型名称匹配，该名称可以与字段名称本身不同。

例如，您的架构中可以包含以下内容：

type Foo {
  id: ID!
  name: String!
}

和以下查询：

query FooQuery @relay_test_operation {
  foo {
    id
    name
  }
}

那么 customMockResolvers 对象将如下所示：

const customMockResolvers = {
  Foo: () => ({
    id: "fooId",
    name: "fooName"
  })
}

请注意，我传递的是 Foo 作为键而不是 foo。

您可以检查您的模式并查看 allUsers 的类型名称是什么。我怀疑它会像 AllUsers 或 allUsersConnection 或类似的东西。

此外，如果您有兴趣为 Relay 组件创建 Storybook 故事，我为此创建了一个 NPM 包：https://www.npmjs.com/package/use-relay-mock-environment

它不需要将 @relay-test-operation 指令添加到您的查询中，而是仅依赖于解析 String 类型（这是所有标量属性的默认值）。当然，您仍然可以添加 @relay-test-operation 指令，还可以通过在配置中提供 customResolvers 来扩展解析器。您还可以通过在配置中提供 extendStringResolver 来扩展 String 解析器。

如果您想实现类似的功能，请随时查看此处的源代码：https://github.com/richardguerre/use-relay-mock-environment。

注意：它仍处于早期阶段，所以有些事情可能会改变，但希望得到一些反馈！

故事书的模拟数据生成

Mock data generation for storybook

relayjs