Fetching data that depends on state

[Kilanvl1]

Summary

Weird data fetching edge case

I am building an enterprise search functionality in my Next.js project that basically lets users query their database using a frontend. So, they can apply filters, which map to column names, and use AND and OR operators to combine those filters to get a list of rows back, in this case documents.

The edge case I seem to be in is that I'm not mutating any data on the server; I'm simply making a select query to the database, so server actions seem inappropriate, and the component shouldn't fetch the data onMount but rather when the user submits a form or presses a button. I can't find any recommendations on how to tackle this in the Next.js documentation or online.

I'm also using Tanstack Query for client-side fetching, and I believe the useQuery hook is also inappropriate because Tanstack Query defines it as

"A query is a declarative dependency on an asynchronous source of data that is tied to a unique key."

But in this case, my component does not have a dependency on data but should rather fetch data on an event.

Additional information

No response

Example

No response

[icyJoseph]

Hi,

I think you'll find server actions to not be the ideal solution here, because, they are queued. So, only runs at a time. They are designed for data mutations rather.

Have you considered using conditional fetching? https://swr.vercel.app/docs/conditional-fetching (react-query also support this iirc) + Route Handlers? Of course protect the route handler, so that while it is publicly reachable, it is only serves data to auth'd requests.

[Kilanvl1]

Hi Joseph,

Thanks for your reply! I already saw that in react-query there is a similar feature called the enable flag. But both in SWR and React Query, it seems like the intention of this conditional querying is for queries that depend on other queries.

Even though I could use those flags to achieve what I want, the implementation would feel like a workaround, for example:

In the image below, the user fills out some filters like the title, subject and classification the document could have, and when they click the search button, I would need to toggle a boolean variable to true that would indicate that the query should be executed. But then, I need to track when that query finishes executing so that I can toggle it back to false until the user possibly later decides to re-search, which sounds like a useEffect with a dependency on the results of the query would be needed.

At that point, it feels like a better idea to wrap const { data, error, isLoading } = useSWR( 'https://api.vercel.app/blog', fetcher )
in a function that runs when the form submits, and I track the data, error and isLoading variables in a state variable.

Overall, it feels weird to me that this is not addressed in any fetching library or in Next. js docs, since this is not the first time I've had to make a similar fetch request. Let me know if my example makes sense and if you have any further advice.

[icyJoseph]

Wouldn't this be a use case for a key with multiple arguments? https://swr.vercel.app/docs/arguments#multiple-arguments

[query, subject,...etc] would be the key, and you can even do this nice thing with trigger, https://swr.vercel.app/docs/mutation.en-US#defer-loading-data-until-needed on the useSWRMutation hook, so that you don't spam your server.

[Kilanvl1]

Yeah, it looks like using the useSWRMutation for data fetching is the way to go; I just didn't expect to use a mutation hook for fetching data. I still think that this could be better documented but thanks for your time!