zeph1665•3y ago

Query keys

Hi! I'm super new to TRPC and based on my understanding, TRPC has a thin wrapper around react query. So, I'm wondering how to include the query keys when using trpc. Thank you!

export const itineraryRouter = router({
  list: publicProcedure
    .input(
      z.object({
        userId: z.string().uuid(),
      })
    )
    .query(async ({ input }) => {
      const itineraries = await prisma.itinerary.findMany({
        where: {
          userId: input.userId,
        },
      })
      return itineraries
    })
})

// how I use it in my component
const { data, isLoading } = trpc.itinerary.list.useQuery(
      {
        userId: user?.id as string,
      },
   
    {
      enabled: !!user,
    }
  )

export const itineraryRouter = router({
  list: publicProcedure
    .input(
      z.object({
        userId: z.string().uuid(),
      })
    )
    .query(async ({ input }) => {
      const itineraries = await prisma.itinerary.findMany({
        where: {
          userId: input.userId,
        },
      })
      return itineraries
    })
})

// how I use it in my component
const { data, isLoading } = trpc.itinerary.list.useQuery(
      {
        userId: user?.id as string,
      },
   
    {
      enabled: !!user,
    }
  )

7 Replies

Alex / KATT 🐱•3y ago

we do the query keys for you the above becomes

[['itinerary', 'list'], { where: { userId: x } }]

[['itinerary', 'list'], { where: { userId: x } }]

Unknown User•3y ago

Message Not Public

eyalll•3y ago

is not necessary, just add the params. The queryKey is made for you.

Unknown User•3y ago

Message Not Public

zeph1665OP•3y ago

Thank you! Just to clarify, if i wanted to invalidate the queries, I would do this?

queryClient.invalidateQueries(['itinerary', 'list', {where: {userId: x}}
])

queryClient.invalidateQueries(['itinerary', 'list', {where: {userId: x}}
])

Alex / KATT 🐱•3y ago

https://trpc.io/docs/v10/useContext#query-invalidation

useContext | tRPC

useContext is a hook that gives you access to helpers that let you manage the cached data of the queries you execute via @trpc/react-query. These helpers are actually thin wrappers around @tanstack/react-query's queryClient methods. If you want more in-depth information about options and usage patterns for useContext helpers than what we provide...

zeph1665OP•3y ago

Oh.. totally missed this part of the docs! Thanks so much!