React Apollo GraphQL : Expecting a parsed GraphQL document. Perhaps you need to wrap the query string in a "gql" tag?

Question

I keep getting this error when trying to update cache after mutation:

Possible Unhandled Promise Rejection (id: 0): Invariant Violation: Expecting a parsed GraphQL document. Perhaps you need to wrap the query string in a "gql" tag?

The mutation succeeds, then I run this code inside the onCompleted method.

const cards = this.props.client.readQuery({ FETCH_CARDS, variables: { userId: data.createPaymentMethod.userId } });

const { id,
        brand,
        lastFour,
        userId,
        stripeID } = data.createPaymentMethod

const paymentMethod = {
  id: id,
  brand: brand,
  lastFour: lastFour,
  userId: userId,
  stripeID: stripeID,
  __typename: 'PaymentMethod',
};

// Write back to the to-do list and include the new item
this.props.client.writeQuery({
  FETCH_CARDS,
  data: {
    paymentMethod: [...cards.paymentMethod, paymentMethod],
  },
});

I don't understand what I'm doing wrong. I'm following this guide: https://www.apollographql.com/docs/react/caching/cache-interaction/#writequery-and-writefragment

EDIT: FETCH_CARDS

const FETCH_CARDS = gql`
  query PaymentMethod($userId: ID){
    paymentMethod(userId: $userId) {
      id
      brand
      lastFour
      userId
      stripeID
    }
  }
`;

matsilva matsilva · Accepted Answer · 2020-01-22T15:40:52

When this happens to me, the issue is usually as simple as the import for FETCH_CARDS not resolving correctly. It is hard to determine without having the complete example, I'd need to be able to see the entire file for each of the code samples and the directory structure.

React Apollo GraphQL : Expecting a parsed GraphQL document. Perhaps you need to wrap the query string in a "gql" tag?

2 Answers