React Apollo GraphQL ：需要解析的 GraphQL 文档。也许您需要将查询字符串包装在“gql”标签中？

Question

在突变后尝试更新缓存时，我不断收到此错误：

可能未处理的 Promise 拒绝 (id: 0): Invariant Violation: Expecting an parsed GraphQL document。也许您需要将查询字符串包装在“gql”标签中？

突变成功，然后我在onCompleted方法中运行此代码。

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],
  },
});

我不明白我做错了什么。我正在遵循本指南：https : //www.apollographql.com/docs/react/caching/cache-interaction/#writequery-and-writefragment

编辑：FETCH_CARDS

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

Answer 1

当我遇到这种情况时，问题通常很简单，因为导入FETCH_CARDS没有正确解决。如果没有完整的示例，很难确定，我需要能够查看每个代码示例和目录结构的整个文件。

Answer 2

对我来说，解决方案更改readQuery({ FETCH_CARDS为readQuery({ query: FETCH_CARDSwriteQuery() 并与 writeQuery() 相同。我同意他们的示例看起来具有误导性，因为他们将调用命名为gql“query”而不是正常的全大写名称。但实际上它是为 准备速记对象道具表示法readQuery({ query: query。