<mutation> refetchQueries“未知指令” _“。”

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添加的东西，here是一个实验性的客户端库，旨在任意转换GraphQL响应。该指令仅由库本身使用。实际上，graphql-lodash实际上在将请求发送到服务器之前删除了指令。如果不这样做，服务器将收到一条指令，它无法识别并抛出验证错误，就像您看到的一样。

由于您看到验证错误，这意味着您根本没有使用graphql-lodash或未正确配置它。 {{3}}提供了将react-apollo与库一起使用的说明。最简单的方法是利用自定义链接：

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无效，因为查询将直接发送到服务器，而无需先由库进行转换。