javascript - <突变/> refetchQueries "Unknown directive "_"."

Question

我正在使用react-apollo和 <Mutation />组件 refetchQueries

UPDATE_TASK

export const UPDATE_TASK = gql`
  mutation updateTask(
    $id: Int!
    $title: String!
    $priority: PriorityType!
    $assigneeId: String!
    $dueDate: Datetime!
    $details: String!
    $changedAt: Datetime!
  ) {
    updateIssueTaskById(
      input: {
        id: $id
        issueTaskPatch: {
          title: $title
          priority: $priority
          assigneeId: $assigneeId
          dueDate: $dueDate
          details: $details
          changedAt: $changedAt
        }
      }
    ) {
      issueTask {
        id
      }
    }
  }
`;

const onUpdateTask = ({ render }) => <Mutation mutation={UPDATE_TASK} refetchQueries={[{query: GET_TASKS_BY_USER_ID}]} awaitRefetchQueries={true}>
    {(mutation, result, ...rest) => render({ mutation, result, rest })}
  </Mutation>

这按预期工作，初始突变发布，我们得到了另一个完全符合我们预期的查询:

它是Query这导致了问题:

请求负载

[{
    "operationName": "getTasksByUserId",
    "variables": {},
    "query": "query getTasksByUserId($assigneeId: String!) {\n  tasks: allIssueTasks(condition: {assigneeId: $assigneeId, status: OPEN}) @_(get: \"edges\") {\n    edges @_(map: \"node\") {\n      node {\n        id\n        title\n        createdAt\n        priority\n        dueDate\n        details\n        status\n        assigneeId\n        creatorId\n        __typename\n      }\n      __typename\n    }\n    __typename\n  }\n}\n"
}]

响应

[{
    "errors": [{
        "message": "Unknown directive \"_\".",
        "locations": [{
            "line": 2,
            "column": 76
        }]
    }, {
        "message": "Unknown directive \"_\".",
        "locations": [{
            "line": 3,
            "column": 11
        }]
    }]
}]

Answer 1

@_ 指令不是内置指令，而是 graphql-lodash 添加的内容，这是一个实验性客户端库，旨在任意转换 GraphQL 响应。该指令仅由库本身使用。在幕后，graphql-lodash 实际上在将请求发送到服务器之前删除了该指令。如果不这样做，服务器将收到一条它无法识别的指令，并抛出一个验证错误，就像您所看到的那样。

既然您看到了验证错误，则意味着您根本没有使用 graphql-lodash，或者没有正确配置它。提供了通过 react-apollo 使用该库的说明 here 。最简单的方法是使用自定义链接:

new ApolloLink((operation, forward) => {
  const { query, transform } = graphqlLodash(operation.query);
  operation.query = query;
  return forward(operation)
    .map(response => ({
      ...response,
      data: transform(response.data),
    }));
});

如果您要使用 refetch 或 refetchQueries 触发查询，则应使用与上面类似的链接。使用包装器 HOC 将不起作用，因为查询将直接发送到服务器，而不会先由库进行转换。