时间戳

首页 > 解决方案 > Apollo GraphQL：为什么子组件中的 useMutation 会触发父组件中的重新渲染

reactjs - Apollo GraphQL：为什么子组件中的 useMutation 会触发父组件中的重新渲染

问题描述

我正在使用“@apollo/client”对社交媒体应用程序做出反应。我的组件结构为...

MainView.js > PostsView.js > PostCard.js > LikeButton.js

  1. MainView.js：有使用 useQuery 的 FETCH_POSTS_QUERY

const { loading, data: { getUsers: users } = {}, error } = useQuery(GET_USERS_QUERY);

  1. LikeButton.js：具有使用 useMutation 的 LIKE_POST_MUTATION。

const [likePost] = useMutation(LIKE_POST_MUTATION, { variables: { postId: post.id } })

MainView 获取帖子并将帖子显示在 PostCard 组件中，该组件具有 LikeButton 组件，其中发生了类似的帖子突变。

每次调用 likePost() 时，PostCard 都会渲染，然后 MainView.js（父组件）会立即重新渲染，这是为什么呢？触发 MainView.JS 组件的突变是什么？另外，我注意到当我添加fetch-policy: no-cache到 GET_USERS_QUERY 时，MainView.js 不会重新呈现。我没有对 LIKE_POST_MUTATION 中的缓存做任何事情，所以我不确定那里的连接是什么。此外，仅当调用 likePost 时才会发生重新渲染。

标签： reactjsgraphqlapollo-client

解决方案

推荐阅读