在 KeystoneJS 中将两个模式字段显示为串联标签答案

【问题标题】：Display two schema fields as concatenated label in KeystoneJS在 KeystoneJS 中将两个模式字段显示为串联标签
【发布时间】：2022-01-05 20:29:42
【问题描述】：

我正在 KeystoneJS (v6) 中设置我的架构和 AdminUI。我使用名称并希望在前端的“选择”字段中显示组合的名字和姓氏：

所以我想要“Tommy Smith”、“Markus Brown”而不是“Tommy”、“Markus”等。

这是我的代码：

import { list } from '@keystone-next/keystone/schema';
import { text } from '@keystone-next/fields';

export const Participant = list({
  ui: {
    labelField: 'firstName',
  },
  // fields
  fields: {
    firstName: text({ isRequired: true }),
    lastName: text({ isRequired: true }),
    }),
  },
});

有没有人可以指点我如何做到这一点？

谢谢！

【问题讨论】：

标签： reactjs keystonejs

【解决方案1】：

在 Keystone 中选择相关项目时，管理 UI 使用项目标签 - 分配给每个项目的人类可读标识符。用于项目标签的值是使用ui.labelField 列表配置控制的：

ui.labelField：选择将用作管理 UI 中标签列的字段。默认情况下查找名为“label”的字段，然后回退到“name”，然后是“title”，最后是“id”，保证存在。

——Keystone 6: Schema API docs

在您的示例中，您已将 Keystone 配置为使用 firstName 字段作为标签，这可以正常工作，但会出现您发现的问题。我们真正需要的是第三个字段，它将名字和姓氏结合在一起。

现在，我们可以使用钩子来做到这一点，例如组合值并将它们保存到另一个 text 字段。但这会复制数据，我们需要记住保持值同步，增加复杂性。最好在从数据库中读取这些值时将它们连接起来。为此，我们可以使用virtual fields。

在给出的示例中，虚拟字段解决方案如下所示：

import { list, graphql } from '@keystone-next/keystone';
import { text, relationship, virtual } from '@keystone-next/keystone/fields';

export const Participant = list({
  ui: {
    // Configure the list to use the fullName field for it's labels
    labelField: 'fullName',
  },
  fields: {
    firstName: text({ validation: { isRequired: true } }),
    lastName: text({ validation: { isRequired: true } }),
    // Add a fullName field that concatenates the participants first and last names together
    fullName: virtual({
      field: graphql.field({
        type: graphql.String,
        resolve: (item) => `${item.firstName} ${item.lastName}`,
      }),
    }),
  },
});

很简单，对吧？然后，在 Admin UI 中，您将看到如下内容：

默认情况下，标签也用于列表视图，因此您会注意到其中的额外信息：

如果您不想这样，您可以另外设置ui.listView.initialColumns 列表配置（文档here）。

有一个相当不错的guide on virtual fields 值得一看。它涵盖了更高级的用法，例如从其他项目加载字段、返回复杂类型等。

【讨论】：

哦@kftb，您可能还注意到isRequired 字段配置现在放置在validation 对象中。此更改是在@keystone-next/keystone 包（10 月初发布）的v26 中进行的。如果可能，您应该升级，尽管我相信虚拟字段在那个时间点可以正常工作，所以经过一些调整，上面的解决方案应该仍然适合您。
多么令人惊叹、深思熟虑、详细且具有教育意义的答案。非常感谢 @Molomby 抽出时间来写这篇文章。