Alaskan donut Posts

Alaskan donut

•Created by Alaskan donut on 10/14/2024 in #❓-help

Dynamically generate url for httpBatchLink

Hey there 👋 is it possible to generate a url for httpBatchLink instead of hardcoding one? I attempted the below code, but this doesn't work. Understandably, the fallback value is used for url each time the component mounts. I believe that I wouldn't even need a useEffect if I wasn't using Next, as I could directly grab these values from window.location, but since I'm using SSR, this code doesn't make it through the SSR pass.

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpBatchLink } from "@trpc/client";
import { useEffect, useState } from "react";
import { trpc } from "@/utils/trpc";
import SuperJSON from "superjson";

export function TRPCQueryClientProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const [url, setUrl] = useState<string | null>(null);

  useEffect(() => {
    if (typeof window !== "undefined") {
      const { hostname, protocol, port } = window.location;
      setUrl(`${protocol}//${hostname}:${port}/api/trpc`);
    }
  }, []);

  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: url ?? "http://localhost:3000/api/trpc", // Fallback in case url is not ready,
          // url: "http://192.168.0.16:3000/api/trpc", // For mobile device testing
          transformer: SuperJSON,
        }),
      ],
    }),
  );
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </trpc.Provider>
  );
}

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpBatchLink } from "@trpc/client";
import { useEffect, useState } from "react";
import { trpc } from "@/utils/trpc";
import SuperJSON from "superjson";

export function TRPCQueryClientProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const [url, setUrl] = useState<string | null>(null);

  useEffect(() => {
    if (typeof window !== "undefined") {
      const { hostname, protocol, port } = window.location;
      setUrl(`${protocol}//${hostname}:${port}/api/trpc`);
    }
  }, []);

  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: url ?? "http://localhost:3000/api/trpc", // Fallback in case url is not ready,
          // url: "http://192.168.0.16:3000/api/trpc", // For mobile device testing
          transformer: SuperJSON,
        }),
      ],
    }),
  );
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </trpc.Provider>
  );
}

3 replies

TtRPC

•Created by Alaskan donut on 9/16/2024 in #❓-help

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
    },
  });

2 replies