T
TanStack•12mo ago
unwilling-turquoise

"use server" at the top, gives me an error.

I don't really know if this is even related to react-query, but here I go anyway. So I'm using the react-query experimental streaming without prefetching in Next.js (https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#experimental-streaming-without-prefetching-in-nextjs) Here I'm getting information In my client component, that looks something like this: 
    const { data: connections } = useSuspenseQuery({
        queryKey: ["userConnections"],
        queryFn: () => getUserConnections(user.id),
    });
    const { data: connections } = useSuspenseQuery({
        queryKey: ["userConnections"],
        queryFn: () => getUserConnections(user.id),
    });
Now in the file, where the function getUserConnections is, I have not marked with either 'use client' or 'use server', and that works. But when I add 'use server', I'm getting this error: 
Error: Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead.
Error: Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead.
'use server'; // breaks it
import { prisma } from "@/lib/db/prisma";
import { Connection } from "@prisma/client";

export async function getUserConnections(id: string): Promise<Connection[]> {
    const connections = await prisma.connection.findMany({
        where: {
            userId: id,
        },
    });

    return connections || [];
}
'use server'; // breaks it
import { prisma } from "@/lib/db/prisma";
import { Connection } from "@prisma/client";

export async function getUserConnections(id: string): Promise<Connection[]> {
    const connections = await prisma.connection.findMany({
        where: {
            userId: id,
        },
    });

    return connections || [];
}
I don't quite understand this. When should I use 'use server' then, and what state is the file in, when it's not marked with anything? And is it even possible to pass in server functions, when using useSuspenseQuery? Or do I have to create an API route, and call that? If so, then I don't see the point of react-query, if you're doing things with streaming, as it adds a lot more complexity.
3 Replies
deep-jade
deep-jade•12mo ago
Hey there. I'm not an expert on this as I've only done useSuspenseQuery streaming with prefetching but this is an interesting question for sure. As useSuspenseQuery is being used within a client component, I don't see it making sense to try to call a server side getUserConnections function because on a stale (or another invalidation) refetch in useSuspenseQuery, it will be trying to call a server function versus a client side call. My guess is that because you are importing getUserConnections into the client component, it will be treating this as a client side function and not erroring but explicitly setting "use server" would the app aware of the error. I think you are right that the proper way to handle this would be to create an api route for the getUserConnections which can be read by both the client and server side and use that call as your queryFn within useSuspenseQuery to satisfy both situations. Not sure if that helps at all but let me know how that works out for you!
unwilling-turquoise
unwilling-turquoiseOP•12mo ago
I think that is the solution, thx. But then I have the question: when should I use react-query, since I could just make it a server-side component, and use a server function? Also removing a lot of code by doing that. What would the benefit here, be of react-query. I only see the downside, of it adding a lot more complexity.
deep-jade
deep-jade•12mo ago
Really just depends on the project and what you are doing! Tkdodo who frequents here wrote this blog which goals into a bunch of things about react query which may give you some ideas on how it could improve your application: https://tkdodo.eu/blog/practical-react-query A simple example with your userConnections above could be: Let's say you use the server side call to SSR your application page where it lists out your user's connections. Now you have an action which updates that connection either by removing it or editing the existing connection. Without react query, you would now how to make another call to update the user connection, refetch the list of connections (or update your local state to removing the entry) to show the update on the client component, and handling all error, loading, and success states for each on of those calls. React query handles all of these processes in an extremely easy way. Once the call use's SSR to cache the response into the query cache, you can then refetch by an interval time, refetch when app is re-focused, utilize queryKey changes to refetch based on filters and parameters, eliminate the need to store the response in a client side state, etc. When making an update using useMutation to the list of connections, you can use setQueryData to add/remove/edit the data without needing to make another call to the api, avoiding the need to refetch on every page which consumes it. This is barely scratching the surface of everything you can. I'd highly recommend looking through code examples and that blog so you can see what would fit in with your application. You are also diving straight into an experimental feature of streaming with react query so you may find a better solution for your problem as well. Have fun!
Practical React Query
Let me share with you the experiences I have made lately with React Query. Fetching data in React has never been this delightful...

Did you find this page helpful?