W
Wasp•2w ago
CamBlackwood

UseQueries Support unavailable - best way around it?

I'm attempting to use the usequeries hook from tanstack query v4 - https://tanstack.com/query/v4/docs/framework/react/reference/useQueries as part of the wasp operations (like useQuery), but it's not be recognised by wasp. If it's not supported it's not a problem, but what can I use as an alternative when I want to batch a few requests together?
useQueries | TanStack Query React Docs
The useQueries hook can be used to fetch a variable number of queries: tsx const results = useQueries({ queries: [ { queryKey: ['post', 1], queryFn: fetchPost, staleTime: Infinity }, { queryKey: ['pos...
5 Replies
kapa.ai
kapa.ai•2w ago
Hi @CamBlackwood. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the provided knowledge sources, it appears that Wasp does not directly support the useQueries hook from Tanstack Query v4. Wasp provides a thin wrapper around the useQuery hook from react-query, but there's no mention of useQueries support in the given information. As an alternative to batching requests together, you can use multiple useQuery hooks in your component. This approach is demonstrated in the Wasp documentation. Here's an example of how you can use multiple queries: 
import React from 'react'
import { useQuery } from '@wasp/queries'
import getAllTasks from '@wasp/queries/getAllTasks'
import getFilteredTasks from '@wasp/queries/getFilteredTasks'

const MainPage = () => {
  const { data: allTasks, error: error1 } = useQuery(getAllTasks)
  const { data: doneTasks, error: error2 } = useQuery(getFilteredTasks, {
    isDone: true,
  })

  if (error1 !== null || error2 !== null) {
    return <div>There was an error</div>
  }

  // Rest of the component...
}
import React from 'react'
import { useQuery } from '@wasp/queries'
import getAllTasks from '@wasp/queries/getAllTasks'
import getFilteredTasks from '@wasp/queries/getFilteredTasks'

const MainPage = () => {
  const { data: allTasks, error: error1 } = useQuery(getAllTasks)
  const { data: doneTasks, error: error2 } = useQuery(getFilteredTasks, {
    isDone: true,
  })

  if (error1 !== null || error2 !== null) {
    return <div>There was an error</div>
  }

  // Rest of the component...
}
This approach allows you to make multiple queries within the same component, which can serve as a workaround for batching requests together. If you need more control over the queries or want to optimize performance, you might consider: 1. Using the configureQueryClient hook in your client setup function to adjust global query settings. This is described in the Client Config documentation. 2. Calling queries directly without the useQuery hook, as mentioned in the Using Queries documentation. This approach allows you to have more control over when and how the queries are executed. If these alternatives don't meet your specific needs, you might need to consider implementing a custom solution or reaching out to the Wasp community for more advanced workarounds. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @CamBlackwood, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?
CamBlackwood
CamBlackwoodOP•2w ago
@kapa.ai so my issue is that I want to get the most recent message from an array of chat ids, so it's a variable number of queries
kapa.ai
kapa.ai•2w ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand you want to fetch the most recent message from an array of chat IDs, which would involve a variable number of queries. Unfortunately, the provided knowledge sources don't contain specific information about handling this exact scenario in Wasp. However, I can suggest a potential approach based on Wasp's capabilities: 1. Create a single query operation in Wasp that accepts an array of chat IDs and returns the most recent message for each chat. 2. Implement the query logic on the server-side to fetch the most recent messages for all provided chat IDs in a single database operation. 3. Use this query in your React component with useQuery. Here's a conceptual example of how this might look: 
// In your .wasp file
query getRecentMessagesForChats {
  fn: import { getRecentMessagesForChats } from "@server/queries.js",
  entities: [Message]
}

// In your server/queries.js file
export const getRecentMessagesForChats = async (args, context) => {
  const { chatIds } = args;
  // Implement the logic to fetch the most recent message for each chat ID
  // This would typically involve a single database query with appropriate filters and ordering
  return context.entities.Message.findMany({
    where: {
      chatId: { in: chatIds }
    },
    orderBy: { createdAt: 'desc' },
    distinct: ['chatId'],
    take: chatIds.length
  });
}

// In your React component
import { useQuery } from '@wasp/queries';
import { getRecentMessagesForChats } from '@wasp/queries/getRecentMessagesForChats';

const ChatComponent = ({ chatIds }) => {
  const { data: recentMessages, isLoading, error } = useQuery(getRecentMessagesForChats, { chatIds });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
return (
    <div>
      {recentMessages.map(message => (
        <div key={message.id}>{message.content}</div>
      ))}
    </div>
  );
};
// In your .wasp file
query getRecentMessagesForChats {
  fn: import { getRecentMessagesForChats } from "@server/queries.js",
  entities: [Message]
}

// In your server/queries.js file
export const getRecentMessagesForChats = async (args, context) => {
  const { chatIds } = args;
  // Implement the logic to fetch the most recent message for each chat ID
  // This would typically involve a single database query with appropriate filters and ordering
  return context.entities.Message.findMany({
    where: {
      chatId: { in: chatIds }
    },
    orderBy: { createdAt: 'desc' },
    distinct: ['chatId'],
    take: chatIds.length
  });
}

// In your React component
import { useQuery } from '@wasp/queries';
import { getRecentMessagesForChats } from '@wasp/queries/getRecentMessagesForChats';

const ChatComponent = ({ chatIds }) => {
  const { data: recentMessages, isLoading, error } = useQuery(getRecentMessagesForChats, { chatIds });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
return (
    <div>
      {recentMessages.map(message => (
        <div key={message.id}>{message.content}</div>
      ))}
    </div>
  );
};
This approach allows you to handle a variable number of chat IDs efficiently by performing a single query operation. It leverages Wasp's query system while keeping the logic for fetching multiple recent messages on the server-side. If you need more specific guidance or if this approach doesn't fully address your use case, I recommend reaching out to the Wasp community on Discord for more tailored assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @CamBlackwood, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?
miho
miho•2w ago
@CamBlackwood could you share what you tried so I can maybe reproduce it? I'd guess that this should work since you can import useQueries and do something like this: 
import { testQuery } from "wasp/client/operations";

import { useQueries } from "@tanstack/react-query";

export const MainPage = () => {
  const results = useQueries({
    queries: [{ queryKey: testQuery.queryCacheKey, queryFn: testQuery }],
  });
...
import { testQuery } from "wasp/client/operations";

import { useQueries } from "@tanstack/react-query";

export const MainPage = () => {
  const results = useQueries({
    queries: [{ queryKey: testQuery.queryCacheKey, queryFn: testQuery }],
  });
...
Bear in mind - we didn't really use this helper internally and could use your feedback if this makes sense to you, maybe we can wrap the react query helper into a Wasp helper.
CamBlackwood
CamBlackwoodOP•2w ago
Hey @miho - I basically just tried to import the useQueries the same way I do with use query (from wasp operations) - in the end I just used a custom operation to return what I needed as an array which was more efficient - if that hadn’t worked I’d have used it from tanstack query directly, wasn’t sure if I was able to do that or not in combination with wasp until your above message 🙂

Did you find this page helpful?