故事书的模拟数据生成答案

【问题标题】：Mock data generation for storybook故事书的模拟数据生成
【发布时间】：2021-09-30 22:42:14
【问题描述】：

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

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

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

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

并将其称为

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

我似乎无法获得返回的默认值。目前，它正在返回

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

我做错了什么？

【问题讨论】：

标签： relayjs

【解决方案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。

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

【讨论】：