Add useQuery

[muezz]

In my last project, I was using tRPC and react-query to handle all of my mutations and query logic. In my current project, I decided to avoid the extremely complicated and bloated set up of my last project.

I have been using this library for a few days and everything was fine as long as I was using the next safe actions to fetch data in server components or mutating data in my client components. Now, I am in a scenario where I want to fetch something in a client component while retaining similar functionality as react-query.

I think an equivalent of useQuery would be amazing with config options like enabled, isLoading, data, error and reset.

[TheEdoRan]

Is useAction not good enough for your use case?

[TheEdoRan]

@muezz it seems that zsa solved your problem, which is great. I personally think that adding a useQuery hook is out of the scope of this library, since Server Actions should be used for mutations and only work via POST method. That said, I could maybe work on a TanStack Query integration in the future, if users want that.

[markomitranic]

I came here trying to figure out why the author made the decision to not use React/Tanstack Query for this, and instead seems to have implemented their own query-inspired solution :D weird. Would love to learn more about why if possible. The only assumption I could make was that they wanted something built-in as a baby step, so that most users have the batteries they need out of the box, while keeping it open for manual integration with a real library. The docs wording gives me that vibe.

To answer the OP - Server actions by default work entirely fine with Tanstack Query's useMutation, so I'd expect next-safe-action actions to work exactly the same with useMutation.

"use client";
import { useMutation } from "@tanstack/react-query";

export function ClientComponent() {
    const { mutate, isPending, data } = useMutation({ mutationFn: myServerActionFn });

Has all the bells and whistles. Is there any reason you couldn't do this?

[muezz]

@TheEdoRan I often use server actions to fetch data in server components. They are especially nice when I want to make the same call in different routes and dont want to expose an API route. I feel like this should be possible to do from the client side as well.

In any case, I am gonna stick with this library for now. Hopefully this gets added if more people mention a need for it.

[prpanto]

The alt package Zsa has a wrapper around React Query https://zsa.vercel.app/docs/react-query

Thanks very much. All I need for now...

[TheEdoRan]

Implemented executeOnMount functionality for hooks in v7.3.0. Docs here.