ApolloGraphQL中的useQuery在第一次调用时更新缓存,但fetchMore会怎样呢?
创始人
2024-09-09 10:02:15
0

在 Apollo GraphQL 中,useQuery 是用于查询数据的 React Hook,它可以自动更新缓存。而对于 fetchMore,它用于在已有数据的基础上获取更多数据,不会触发缓存的自动更新。但是我们可以通过一些方法手动更新缓存。

下面是一个示例代码,演示了如何使用 useQueryfetchMore 来获取数据并更新缓存:

import { useQuery, gql } from '@apollo/client';

const GET_POSTS = gql`
  query GetPosts($limit: Int, $offset: Int) {
    posts(limit: $limit, offset: $offset) {
      id
      title
    }
  }
`;

const PostList = () => {
  const { loading, data, fetchMore } = useQuery(GET_POSTS, {
    variables: { limit: 10, offset: 0 },
  });

  if (loading) {
    return 

Loading...

; } const { posts } = data; const loadMorePosts = () => { fetchMore({ variables: { offset: posts.length }, updateQuery: (prev, { fetchMoreResult }) => { if (!fetchMoreResult) return prev; return { posts: [...prev.posts, ...fetchMoreResult.posts], }; }, }); }; return (
{posts.map((post) => (
{post.title}
))}
); }; export default PostList;

在上述代码中,我们首先定义了一个 GET_POSTS 查询,用于获取文章列表。然后,我们使用 useQuery Hook 来发起查询请求,并在初始时设置了 limitoffset 变量。

当数据加载完成后,我们可以从 data 对象中获取到 posts 数组。然后,我们通过 fetchMore 方法来获取更多的文章数据。在 fetchMore 方法中,我们指定了新的 offset 变量,用于获取下一批数据。我们还通过 updateQuery 参数来手动更新缓存,将新获取到的数据添加到之前的数据中。

最后,我们展示了文章列表,并提供了一个 "Load More" 按钮,点击该按钮时会触发 loadMorePosts 函数,从而获取更多的文章数据。

通过这种方式,我们可以在使用 fetchMore 方法获取更多数据时手动更新缓存,实现缓存的更新和数据的加载。

相关内容

热门资讯

安装apache-beam==... 出现此错误可能是因为用户的Python版本太低,而apache-beam==2.34.0需要更高的P...
避免在粘贴双引号时向VS 20... 在粘贴双引号时向VS 2022添加反斜杠的问题通常是由于编辑器的自动转义功能引起的。为了避免这个问题...
Android Recycle... 要在Android RecyclerView中实现滑动卡片效果,可以按照以下步骤进行操作:首先,在项...
omi系统和安卓系统哪个好,揭... OMI系统和安卓系统哪个好?这个问题就像是在问“苹果和橘子哪个更甜”,每个人都有自己的答案。今天,我...
原生ios和安卓系统,原生对比... 亲爱的读者们,你是否曾好奇过,为什么你的iPhone和安卓手机在操作体验上有着天壤之别?今天,就让我...
Android - 无法确定任... 这个错误通常发生在Android项目中,表示编译Debug版本的Java代码时出现了依赖关系问题。下...
Android - NDK 预... 在Android NDK的构建过程中,LOCAL_SRC_FILES只能包含一个项目。如果需要在ND...
Akka生成Actor问题 在Akka框架中,可以使用ActorSystem对象生成Actor。但是,当我们在Actor类中尝试...
Agora-RTC-React... 出现这个错误原因是因为在 React 组件中使用,import AgoraRTC from “ago...
Alertmanager在pr... 首先,在Prometheus配置文件中,确保Alertmanager URL已正确配置。例如:ale...