Wasp-lang•7mo ago

Optimal approach to fire a second query that depends on the result of a first query?

I'm building out the messaging portion of my SaaS, and first I send a query for the chats, and then after that I retreive the details of those involved in the conversation via a second query. My standard implementation would be to use a useEffect hook with the chats as a dependency, but wondered if there was a better version of doing this in wasp?

17 Replies

kapa.ai•7mo 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: ---------------------- In Wasp, you can use the useQuery hook to make your queries reactive. This hook is a thin wrapper around the useQuery hook from react-query. The only difference is that you don't need to supply the key - Wasp handles this for you automatically. Here's an example of how you might structure your code:

import React from 'react'  
import { useQuery, getChats, getChatDetails } from 'wasp/client/operations'  
  
const ChatPage = () => {  
 const { data: chats, error: error1 } = useQuery(getChats)  

 React.useEffect(() => {
   if (chats) {
     const { data: chatDetails, error: error2 } = useQuery(getChatDetails, {  
       chatIds: chats.map(chat => chat.id),  
     })  
   }
 }, [chats]);

 // ... rest of your component
}

import React from 'react'  
import { useQuery, getChats, getChatDetails } from 'wasp/client/operations'  
  
const ChatPage = () => {  
 const { data: chats, error: error1 } = useQuery(getChats)  

 React.useEffect(() => {
   if (chats) {
     const { data: chatDetails, error: error2 } = useQuery(getChatDetails, {  
       chatIds: chats.map(chat => chat.id),  
     })  
   }
 }, [chats]);

 // ... rest of your component
}

In this example, getChats is the first query that fetches the chats. Once the chats are fetched, a useEffect hook is triggered which then fires the second query getChatDetails with the chat ids as arguments. However, please note that this approach might not be optimal if the second query depends on the first one and they are used in multiple places in your application. In such cases, you might want to consider a more structured approach to handle dependent queries. This is currently an open discussion in the Wasp community, as mentioned in this Github issue (https://github.com/wasp-lang/wasp/issues/591). Also, if you need more control over the query execution, you might want to consider using react-query's useQuery directly. You can access the query cache key in Wasp by accessing the queryCacheKey property on any Query as mentioned in the Wasp documentation (https://wasp-lang.dev/docs/data-model/operations/actions#advanced-usage). ---------------------- 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?

martinsos•7mo ago

@CamBlackwood , if I remember correctly, there is a "dependant" query feature from useQuery, that should allow you to specify two useQuery calls, one after each other, where for one of them you explicitly say that it depends on the other query above. I believe this should be doable also with Wasp's abstraction of useQuery. I will also ping @sodic in as he has probably the freshest useQuery experiences, from recent stuff he has been working on :).

Filip•7mo ago

Hey @CamBlackwood! @martinsos is right. Check TanStack's dependant query docs: https://tanstack.com/query/v4/docs/framework/react/guides/dependent-queries#usequery-dependent-query You can do that with userQuery imported from Wasp. Let us know if it worked out! 🙂

CamBlackwoodOP•7mo ago

Thanks guys - been away from my machine this past wekeend so will try it today and report back 🫡 just trying the above now, and getting an error saying that it can't find the property "enabled" - this is how I'm trying to call it

useQuery(getBrandsById, {chatIds}, enabled: false)

useQuery(getBrandsById, {chatIds}, enabled: false)

fixed, wrapped it in an object 🙂

useQuery(getBrandsById, { chatIds }, { enabled: chatIds ? true : false })

useQuery(getBrandsById, { chatIds }, { enabled: chatIds ? true : false })

would it be helpful if I added this to the wasp docs? Happy to give it a go

Filip•7mo ago

Glad you got it working! And thanks for considering improving our docs! 😄 In this case, there's no need because this:

useQuery(getBrandsById, {chatIds}, enabled: false)

useQuery(getBrandsById, {chatIds}, enabled: false)

is not valid JavaScript syntax anyway. The code has a syntax error (not related to Wasp in any way)

CamBlackwoodOP•7mo ago

sorry, I meant in terms of adding the enabled property itself to the docs - it's not currently on this page https://wasp-lang.dev/docs/tutorial/queries

Filip•7mo ago

Oh, sorry 😅 Yes, that's true, but the tutorial doesn't purposefully doesn't mention the options. We only wanted to mention the stuff you need to get the tutorial app working, not list everything we support For listing all our features, we have the rest of the docs and API references Here's the relevant section for useQuery: https://wasp-lang.dev/docs/data-model/operations/queries#the-usequery-hook-1

CamBlackwoodOP•7mo ago

oh wow, didn't even realise that section existed at all 😅 Thanks for the link! I'd been using the overview tutorial this whole time haha

Filip•7mo ago

Now that's something that might we worth looking into Can you tell me more about your jurney through the docs? We can make some changes to make that page more easily discoverable If you missed it, so will someone else

CamBlackwoodOP•7mo ago

So for me, I'd been basically looking at the 7 tutorial steps more as "the 7 features of wasp", if you see what I mean, and not going further than that. Off the top of my head, I would maybe add a slightly more prominent link under each page header, something like "Full Details:" and then a list of each concept with a link to the full docs for that part of the feature

Filip•7mo ago

I like this idea. We do link to the reference pages throughout the tutorial, but it could definitely be more prominent @martinsos what do you think?

matijash•7mo ago

this might be really nice, super good feedback

martinsos•7mo ago

Yeah I can certainly see this as a potential issue, and would be good to help people avoid it! Header at each page saying something like "Now we are going to introduce featuer X, for full docs check here" could be good idea, as mentioned above. Maybe we could also tell them to check the whole docs at the end of the Tutorial if we don't yet, although that is also misable. Finally, we could, before Tutorial, in Getting Started, have a bit of guide on how we advise they navigate our docs and what can they expect from them (if we don't have this yet). Just popping different ideas here!

CamBlackwoodOP•7mo ago

I think the last point could be a nice approach; an overview of how to use the docs would be useful

Filip•7mo ago

@CamBlackwood I've created a Github issue: https://github.com/wasp-lang/wasp/issues/2079

GitHub

Make sure users can easily discover richer documentation for featur...

A user on Discord didn't realize there was extra documentation on Operations besides the stuff mentioned in the tutorial and Operations/Overview (which is just an introcution). We should someho...

Filip•7mo ago

Thanks for bringing this to our attention If you'd like to work on improving this, you're more than welcome to 😄 But if you'd like to leave it to us, that's fine too!

CamBlackwoodOP•7mo ago

Thanks @sodic ! I’m more than happy to contribute. Will give it a look over the next few days

Gaming

Programming

Optimal approach to fire a second query that depends on the result of a first query?