如何将 React-Relay @appendNode 指令与 Hasura 生成的函数/模式一起使用？

Question

我目前正在尝试创建一个界面，其中用户能够在模式中将附加元数据描述符附加到对象，并且需要在页面上的其他位置反映此附加的结果。我正在使用 React-relay 和 Hasura 自动创建 graphql 模式/函数。我目前正在尝试使用 @appendNode 指令将以下突变的结果与其他现有数据附加到现有边缘，以便可以将其显示给用户。该insert_dataset_metadata_one函数仅返回需要附加的元数据节点，因此我将该指令放在函数调用和要从该节点返回的字段之间。

export const insertDatasetMetadata = graphql`
  mutation mutations_InsertDatasetMetadataMutation(
    $object: dataset_metadata_insert_input!
    $connectionIDs: [ID!]!
  ) {
    insert_dataset_metadata_one (
      object: $object
    ) @appendNode(connections: $connectionIDs, edgeTypeName: "dataset_metadataEdge") {
      id
      name: field_name
      value: field_value
      datasetMetadataId: dataset_metadata_id
      normalizedName: normalized_name
      normalizedValue: normalized_value
    }
  }
`;

在 TypeScript 方面，我用数据集对象的中继 ID 来调用此突变（即id;datasetId是 postgres 中用于将插入的元数据与其描述的对象关联起来的外键）。

      const { id, datasetId, metadata } = dataset;
      // foreach over the metadata to get a data object and an if statement to test what needs updates and what needs inserts skipped for brevity
      commitMetadataInsert({
              variables: {
                object: {
                  dataset_id: datasetId ?? '',
                  field_name: data.name,
                  field_value: data.value,
                  normalized_name: data.normalizedName,
                  normalized_value: data.normalizedValue,
                },
                connectionIDs: [id],
              },
              onCompleted,
              onError,
            });

奇怪的是，此插入失败并出现以下错误：

RRNLRequestError: Relay request for `mutations_InsertDatasetMetadataMutation` failed by the following reasons:

1. unexpected variables in variableValues: connectionIDs

在添加 connectionIDs 变量和 @appendNode 指令之前，此突变按预期工作，即插入的元数据出现在页面重新加载时；然而，由于我试图避免重新加载，所以这并不令人满意。我已经四处挖掘并寻找中继文档内部/外部的资源，这些资源可以提供有关该指令的指导，但找不到任何内容来表明原因可能是什么或在这种情况下该怎么做。我已经确认id变量的值正是我所期望的（即数据集的中继 ID）。我遗漏/做错了什么？

Answer 1

我遇到过同样的问题。

解决方法是从请求变量中删除connectionID，因为该变量未在最终的graphql文本中使用，因为该指令仅是客户端的，并且不包含在最终请求中（中继在获取之前将其删除）。

从请求中删除变量后，该指令在客户端上完美运行并创建/附加了边缘。

例子：

export const fetchGraphQL: FetchGraphQL = async (text, variables, url) => {

  // ...
  const { connectionsIDs, ...variablesWithoutConnections } = variables

  response = await fetch(url, {
    // ...
    body: JSON.stringify({
      query: text, // this text won't have client-side directives (e.g. @appendNode)
      variables: variablesWithoutConnections, // exclude client-side directive variables
    }),
  })

  // ...
}