Ad

RefetchQueries "Unknown Directive "_"."

I am using react-apollo and the <Mutation /> component with 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>

This works as expected that the initial mutation posts and we get another query exactly as we should:

enter image description here

Its the Query that is causing problems:

Request Payload

[{
    "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"
}]

Response

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

Answer

The @_ directive is not a built-in directive, but something that's added by graphql-lodash, which is an experimental client-side library designed to arbitrarily transform GraphQL responses. The directive is used only by the library itself. Under the hood, graphql-lodash actually removes the directive before sending the request to the server. If it didn't do this, the server would receive a directive that it didn't recognize and throw a validation error like the one that you're seeing.

Since you're seeing that validation error, it means either you're not using graphql-lodash at all, or have not configured it correctly. Directions for using the library with react-apollo are provided here. The easiest way is to utilize a custom link:

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

If you're going to trigger queries using refetch or refetchQueries, you should utilize a Link like the one above. Using a wrapper HOC will not work, since the queries will be sent directly to the server without being transformed by the library first.

Ad
source: stackoverflow.com
Ad