T
tRPC

useQuery with query params

useQuery with query params

Ppuzzles9351
View on Discord
6/23/2023
Hi, I'm wondering how to correctly handle query params as a useQuery input using Nextjs. 
const RecipeDetailPage: NextPageWithLayout = () => {
  const router = useRouter();

  const querySchema = z.object({ id: z.string() });
  const query = querySchema.safeParse(router.query);

  const recipe = api.recipes.getRecipeById.useQuery(query.data?.id, {
    enabled: query.success,
  });

  if (!recipe.data) return null;

  return <RecipeDetail recipe={recipe.data} />;
};
const RecipeDetailPage: NextPageWithLayout = () => {
  const router = useRouter();

  const querySchema = z.object({ id: z.string() });
  const query = querySchema.safeParse(router.query);

  const recipe = api.recipes.getRecipeById.useQuery(query.data?.id, {
    enabled: query.success,
  });

  if (!recipe.data) return null;

  return <RecipeDetail recipe={recipe.data} />;
};
Since useRouter.query returns undefined on first render, I need to parse the query. This works, however there's still a type error on the query.data?.id, since it could be null, and the query expects a string. What is the right way to handle a situation like this.
DDoc
View on Discord
6/23/2023
u can do enabled: router.isReady 
const router = useRouter();
const { categoryId } = router.query;
 const { data: categoryProducts, isFetched } = api.category.getCategoryItems.useQuery(
        { name: categoryId as string[] },
        { enabled: router.isReady, refetchOnWindowFocus: false },
    )
const router = useRouter();
const { categoryId } = router.query;
 const { data: categoryProducts, isFetched } = api.category.getCategoryItems.useQuery(
        { name: categoryId as string[] },
        { enabled: router.isReady, refetchOnWindowFocus: false },
    )
This is how i use it.

Looking for more? Join the community!

T
tRPC

useQuery with query params

Join Server
Recommended Posts
infiniteQuery always undefined cursorHey there ! I'm struggling a bit to understand who the `useInfiniteQuery` is supposed to work with Migrating v9 to v10 - - using the client?I'm migrating a large project from trpc v9 to v10. There is a section of the code that uses the resuUsing tRPC and something else too? For building a mobile app / public API.A bit noobish, but I'm starting a new project w/ the t3 stack and I'm looking to build a mobile app whats the difference between context and middlewareand which 1 should I use for express session cookiesAxios, ExpressMiddleware and TRPCErrorsWe have an express based TRPC server and our procedures are calling our endpoints using axios. So whbase pathHi, don’t seem to be able to find documentation but is there a way to set the base path of the serveAny Benefit using tRPC for only remote api calls?Hi, does it make sense to use trpc if all I will be doing is calling a remote api? I have set it up Can I connect to a regular node express with socket.io?My idea is that I will host the socketio nodejs server in some server, and then use it with my nextj