javascript - 使用 Apollo 客户端更新缓存数据 - ReactJS

Question

我正在尝试使用 ReactJs、GraphQL 和 NodeJs 构建 HackerNews Clone，到目前为止，我能够实现很多东西，但是我在尝试更新链接以便用户查看更改时遇到了困难更新页面。与此过程相关的两个查询是变异 VOTE_MUTATION，它使用户可以对我的查询 LINKS_FEED 中的链接进行投票。它有效，但我必须刷新页面才能看到更改。这是我试图做的

查询

变异 VOTE_MUTATION

export const VOTE_MUTATION = gql`
  mutation VoteMutation($linkId: ID!) {
    vote(linkId: $linkId) {
      id
      link {
        id
        votes {
          id
          user {
            id
          }
        }
      }
      user {
        id
      }
    }
  }
`;

查询 LINKS_FEED

export const LINKS_FEED = gql`
  query LinksFeed {
    feed {
      count
      links {
        id
        description
        url
        postedBy {
          id
          name
        }
        votes {
          id
          user {
            name
          }
        }
      }
    }
  }

这就是我的 API 调用的样子

 const [upvoteLink, { data }] = useMutation(VOTE_MUTATION);

  const voteLink = async (linkId) => {
    try {
      await upvoteLink({
        variables: { linkId },
        update: (cache, { upvoteLink }) => {
          const currentData = cache.readQuery({ query: LINKS_FEED });
          const newData = {...currentData}
          newData.feed = {...currentData.feed}
          newData.feed.links = [...currentData.feed.links, upvoteLink];
          cache.writeQuery({ query: LINKS_FEED }, newData);
        },
      });
    } catch (err) {
      alert(err.message);
    }
  };

标签： javascriptnode.jsreactjsgraphqlapollo-client