React- query :使用不同参数的useInfiniteQuery进行新查询

import { useInfiniteQuery } from 'react-query';
import axios from 'axios';

function fetchPosts({ pageParam = 1 }) {
  return axios.get(`/api/posts?page=${pageParam}`);
}

function Posts() {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    status,
  } = useInfiniteQuery(
    'posts',
    fetchPosts,
    {
      getNextPageParam: (lastPage, pages) => lastPage.nextPage,
    }
  );

  return (
    <div>
      {status === 'loading' ? (
        <span>Loading...</span>
      ) : status === 'error' ? (
        <span>Error fetching posts</span>
      ) : (
        <>
          {data?.pages.map((page, i) => (
            <React.Fragment key={i}>
              {page.results.map((post) => (
                <div key={post.id}>{post.title}</div>
              ))}
            </React.Fragment>
          ))}
          <button
            onClick={() => fetchNextPage()}
            disabled={!hasNextPage || isFetchingNextPage}
          >
            {isFetchingNextPage ? 'Loading more...' : 'Load More'}
          </button>
        </>
      )}
    </div>
  );
}

import { useQueryClient } from 'react-query';

function refreshQuery() {
  const queryClient = useQueryClient();
  queryClient.invalidateQueries('posts');
}