TTC
Theo's Typesafe Cult•10mo ago
Hampterultimate

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!
No description
2 Replies
NeoFox
NeoFox•10mo 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
HampterultimateOP•10mo 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

Did you find this page helpful?