Theo's Typesafe Cult•7mo ago

Issues with queryKey

I am trying to assign dynamic keys to queryKey for my procedure so I can check if the query key exists, if it doesnt then simply refetch the query.

const { data: oldChatMessages } = api.chat.getOldMessagesFromRoomId.useQuery(
    { roomId: chatId },
    {
      // queryKey: [
      //   "chat.getOldMessagesFromRoomId",
      //   {
      //     roomId: chatId,
      //   },
      // ], 
      queryKey: [chatId], // <-- Doesn't work
      refetchOnWindowFocus: false,
      refetchOnReconnect: false,
      retry: false,
      staleTime: Infinity,
      onSuccess: (data) => {
        if (data !== undefined) {
          setAllChatMessages(data);
        }
      },
    }
  );

const { data: oldChatMessages } = api.chat.getOldMessagesFromRoomId.useQuery(
    { roomId: chatId },
    {
      // queryKey: [
      //   "chat.getOldMessagesFromRoomId",
      //   {
      //     roomId: chatId,
      //   },
      // ], 
      queryKey: [chatId], // <-- Doesn't work
      refetchOnWindowFocus: false,
      refetchOnReconnect: false,
      retry: false,
      staleTime: Infinity,
      onSuccess: (data) => {
        if (data !== undefined) {
          setAllChatMessages(data);
        }
      },
    }
  );

I am unable to find anything online so this is my last stop. When I am logging queryKeys using getQueryKey then in the output I am getting these two keys only.

['chat', 'getOldMessagesFromRoomId']

['chat', 'getOldMessagesFromRoomId']

If any of you need more context on why I am doing this, feel free to ask. Please help!

2 Replies

NeoFox•7mo ago

Not sure if this would help but I use dynamic query keys like this:

    const ticket: UseQueryResult<TicketInfo> = useQuery({
        queryKey: ["getTicketInfo", ticketId],
        queryFn: () => getTicketInfo(ticketId),
        enabled: ticketId != undefined && session.data?.id != undefined,
    })

    const ticket: UseQueryResult<TicketInfo> = useQuery({
        queryKey: ["getTicketInfo", ticketId],
        queryFn: () => getTicketInfo(ticketId),
        enabled: ticketId != undefined && session.data?.id != undefined,
    })

And to only fetch based on a condition you can use the

enabled

enabled

attribute

Hampterultimate•7mo ago

Yes, thats how I used useQuery outside of tRPC. But here it just gets angry at me if I pass any string to it

Gaming

Programming

Issues with queryKey