Apollo graphql：变异后的 writeQuery 不会触发 flatlist 的重新渲染

Question

我在触发 graphql 突变的平面列表中有以下按钮，在突变之后我执行 writeQuery 来更新本地缓存（存储）。在突变的更新函数中，我正在更新缓存中的两个字段。本质上，当用户触摸“赞”按钮时，我将“赞”的布尔值更改为 true 并将 post 的“赞”计数更新为 +1（类似于 twitter）。但是，平面列表中的组件不会更新。我什至打印出 apollo store/cache，我看到值正在更新。为什么平面列表在缓存写入后不重新渲染？

   render() {


 const { posts, isFetching, lastUpdated, location, navigation, data, likeMutation, username, distancePointLatitude, distancePointLongitude, searchPointLatitude, searchPointLongitude } = this.props


 <FlatList
  data={data.near}
  style={styles.scrollViewContent}
  extraData={this.props.store}
  //renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
  showsVerticalScrollIndicator={false}
  onRefresh={this._onRefresh.bind(this)}
  refreshing={this.state.refreshing}
  keyExtractor={this._keyExtractor}
  renderItem={({item, index}) => item.posts.length != 0 && <ListItem>

{item.posts[0].userInteraction.userLike ? <Icon name='md-heart' style={{ color: 'crimson',fontSize: 28}} /> 
          : <Icon name='heart' style={{ fontSize: 26}} 

          onPress={() => likeMutation({ variables: { elementId: item.posts[0].postId, userId: username  },

            update: (store, { data: { addLike } }) => {
              // Read the data from our cache for this query.

              var thisLocationRadius = {searchPointLongitude: searchPointLongitude,
                searchPointLatitude: searchPointLatitude,
                radius: fiftyMilesInMeters, distancePointLongitude: distancePointLongitude,
                 distancePointLatitude: distancePointLatitude };


              var data = store.readQuery({ query: getLocalPosts,
                variables: {
                locationRadius: thisLocationRadius,
                userId: username
              }, });


             data.near[index].posts[0].userInteraction.userLike = true

              data.near[index].posts[0].interactionStats.totalLikes + 1


              // Write our data back to the cache.
              store.writeQuery({ query: getLocalPosts, data });



            },
          }).catch((error) => {
          console.log('there was an error sending the query', error);
          })} />  }
}

  const HomeWithData = graphql(getLocalPosts, {
        options:  ({ searchPointLongitude, searchPointLatitude, distancePointLongitude, distancePointLatitude, username }) => ({ variables: { locationRadius: {searchPointLongitude: searchPointLongitude,
           searchPointLatitude: searchPointLatitude,
           radius: fiftyMilesInMeters, distancePointLongitude: distancePointLongitude,
            distancePointLatitude: distancePointLatitude }, userId: username } }),

        });


export default compose( connect(mapStateToProps),
HomeWithData,
graphql(like, { name: 'likeMutation' }))(Home);

getLocalPosts 查询：

export const getLocalPosts = gql`query getLocalPosts($locationRadius: locationRadius!, , $userId: String!) {
    near(locationRadius: $locationRadius){
      name,
      address,
      phonenumber,
      email,
      website,
      about,
      location {
        longitude,
        latitude
      },
      distance(unit: MILE),
      businessId,
      hours {
        weekDay,
        startTime,
        endTime
      },
      posts(isActive: true) {
        postText,
        postId,
        userInteraction(userId: $userId){
          userLike
        },
        interactionStats{
          totalLikes
        }
      },
    }
    }`;

Answer 1

我认为 Apollo 在决定更改后应触发哪个查询侦听器时会考虑一些因素，包括 variables 字段。

在您的情况下，具有平面列表的组件不是 re-rendered，因为查询没有收到更改通知。它不会收到更改通知，因为 Apollo 认为这是一个与您调用 writeQuery.

时在商店中更新的查询不同的查询

所以解决办法就是在调用writeQuery的时候加上variables字段。并且它应该具有您在调用查询时使用的相同值。

假设这些具有正确的值，您对 store.writeQuery 的调用应该如下所示：

          store.writeQuery({ 
            query: getLocalPosts, 
            data, 
            variables: {
              locationRadius: thisLocationRadius,
              userId: username
            }
          });

Apollo graphql：变异后的 writeQuery 不会触发 flatlist 的重新渲染

Apollo graphql: writeQuery after mutation does not trigger re-render of flatlist

apollo

graphql

react-native

apollo-client