Alaskan donut•4w ago

How to get pageParam from useInfiniteQuery()?

How would I write a tRPC call equivalent to this traditional useInfiniteQuery? My primary concern here is that I need to pass in a cursor to my procedure, and upon each successive query I need to update this cursor for the next call.

  const {
    data: posts,
    isFetching,
    error,
    hasNextPage,
    fetchNextPage,
  } = useInfiniteQuery({
    queryKey: ["profile-posts", username],
    queryFn: ({ pageParam }) =>
      kyInstance
        .get(
          `/api/profiles/${username}/posts`,
          pageParam ? { searchParams: { cursor: pageParam } } : {},
        )
        .json<TProfilePostsPage>(),
    initialPageParam: null as string | null,
    getNextPageParam: (lastPage) => lastPage.nextCursor,
  });

  const {
    data: posts,
    isFetching,
    error,
    hasNextPage,
    fetchNextPage,
  } = useInfiniteQuery({
    queryKey: ["profile-posts", username],
    queryFn: ({ pageParam }) =>
      kyInstance
        .get(
          `/api/profiles/${username}/posts`,
          pageParam ? { searchParams: { cursor: pageParam } } : {},
        )
        .json<TProfilePostsPage>(),
    initialPageParam: null as string | null,
    getNextPageParam: (lastPage) => lastPage.nextCursor,
  });

Maybe it should be something like this?

  const [nextCursor, setNextCursor] = useState<string | null>(null)

  const {
    data: posts,
    isFetching,
    error,
    hasNextPage,
    fetchNextPage,
  } = trpc.getProfilePosts.useInfiniteQuery({ username, cursor: nextCursor }, {
    queryKey: ["profile-posts", username],
    initialPageParam: null as string | null,
    getNextPageParam: (lastPage) => {
      setNextCursor(lastPage.nextCursor)
      return lastPage.nextCursor
    },
  });

  const [nextCursor, setNextCursor] = useState<string | null>(null)

  const {
    data: posts,
    isFetching,
    error,
    hasNextPage,
    fetchNextPage,
  } = trpc.getProfilePosts.useInfiniteQuery({ username, cursor: nextCursor }, {
    queryKey: ["profile-posts", username],
    initialPageParam: null as string | null,
    getNextPageParam: (lastPage) => {
      setNextCursor(lastPage.nextCursor)
      return lastPage.nextCursor
    },
  });

0 Replies

No replies yetBe the first to reply to this messageJoin