javascript - 尝试从更新的突变响应中写入 Apollo gql 中的缓存

Question

我在我的应用程序的某些部分有这个工作，但我试图在更大的查询上实现它但它不起作用。

我有以下突变，它确实运行了，但是在尝试写入缓存时它给了我一个错误，这样我就可以立即重新加载我的状态而不是刷新页面。

我回来的错误如下

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

我正在使用 gql 标签，所以我认为不是这样。我认为在 UpdateDadHat Mutation 的更新缓存函数中写入 writeQuery 时，我的数据不匹配。

希望有敏锐眼光的人可以帮助我解决这个问题。

提前感谢

const [updateDadHat, { data: updateDadHatData, loading: updating }] =
    useMutation(UPDATE_DAD_HAT, {
      update(cache, { data: mutatedData }) {
        const updateDadHatResponse = mutatedData?.updateDadHat;

        if (updateDadHatResponse) {

          cache.writeQuery({
            query: GET_DAD_HATS_BY_USER_ID,
            variables: { id: user.id },
            data: {
              findUserByID: {
                hats: {
                  data: updateDadHatResponse,
                },
              },
            },
          });
        }
      },
    });

updateDadHatResponse 如下所示

{
    "markers":
    [
        {
            "state": "select",
            "containerTransformMatrix":
            {
                "e": 0,
                "f": 0,
                "a": 1,
                "c": 0,
                "b": 0,
                "d": 1,
                "__typename": "VtM"
            },
            "left": 37,
            "height": 30,
            "text": "your text here",
            "color": "#EF4444",
            "typeName": "TextMarker",
            "fontFamily": "Helvetica, Arial, sans-serif",
            "rotationAngle": 0,
            "padding": 5,
            "width": 100,
            "top": 328,
            "visualTransformMatrix":
            {
                "e": 0,
                "f": 0,
                "a": 1,
                "c": 0,
                "b": 0,
                "d": 1,
                "__typename": "VtM"
            },
            "__typename": "Marker"
        }
    ],
    "name": "The test hat",
    "image": "http://res.cloudinary.com/image.png",
    "_id": "304386127558606920",
    "__typename": "DadHat"
}

以下架构

export const GET_DAD_HATS_BY_USER_ID = gql`
  query FindUserByID($id: ID!) {
    findUserByID(id: $id) {
      _id
      name
      hats {
        data {
          markers {
            left
            height
            text
            color
            typeName
            rotationAngle
            padding
            width
            top
            fontFamily
            state
            containerTransformMatrix {
              a
              b
              c
              d
              e
              f
            }
            visualTransformMatrix {
              a
              b
              c
              d
              e
              f
            }
          }
          name
          image
          _id
        }
      }
    }
  }
`;

export const UPDATE_DAD_HAT = gql`
  mutation UpdateDadHat($id: ID!, $connect: ID!, $markers: [MarkerInput]) {
    updateDadHat(
      id: $id
      data: { markers: $markers, owner: { connect: $connect } }
    ) {
      markers {
        state
        containerTransformMatrix {
          e
          f
          a
          c
          b
          d
        }
        left
        height
        text
        color
        typeName
        fontFamily
        rotationAngle
        padding
        width
        top
        visualTransformMatrix {
          e
          f
          a
          c
          b
          d
        }
      }
      name
      image
      _id
    }
  }
`;

标签： javascriptgraphqlapollo