Data Fetching Library
Unanswered
Narrow-barred Spanish mackerel posted this in #help-forum
Narrow-barred Spanish mackerelOP
Hi, I'm searching for a library that lets you fetch data using the following constraints:
1. Accepts a promise and returns the result
2. Accepts Server Actions as fetcher functions
3. Lets you initiate the promise call on the server side and streams the result to the client when it is done
4. Has a hook with a cache-key system that re-uses the same promise over multiple components (see SWR, react query)
5. Works with suspense and suspends the component until the initial promise arrives
6. Low overhead, allows you to achieve all this using a single server component (start fetching) and a single client component (accept data, wrapped in Suspense)
I come from SWR, but its suspense feature is broken as of my knowledge (see https://github.com/vercel/swr/issues/1906). React Query and useSuspenseQuery don't work with Server Actions (see https://github.com/TanStack/query/issues/6591)
1. Accepts a promise and returns the result
2. Accepts Server Actions as fetcher functions
3. Lets you initiate the promise call on the server side and streams the result to the client when it is done
4. Has a hook with a cache-key system that re-uses the same promise over multiple components (see SWR, react query)
5. Works with suspense and suspends the component until the initial promise arrives
6. Low overhead, allows you to achieve all this using a single server component (start fetching) and a single client component (accept data, wrapped in Suspense)
I come from SWR, but its suspense feature is broken as of my knowledge (see https://github.com/vercel/swr/issues/1906). React Query and useSuspenseQuery don't work with Server Actions (see https://github.com/TanStack/query/issues/6591)
59 Replies
Server Actions are not fetcher functions, you should not use them that way. You can define a regular server-side function for data fetching.
Actions are meant for mutations only. I don't think you will find a library that meets your needs as it goes against the principles of the Server Actions API.
Everything you listed besides point 2, afaik is literally just react-query.
Actions are meant for mutations only. I don't think you will find a library that meets your needs as it goes against the principles of the Server Actions API.
Everything you listed besides point 2, afaik is literally just react-query.
This is likely to change in the future though as React has created Server Functions, which currently only hold Server Actions (mutations API), but I'd expect a query API equivelant at some point. react-query will surely leverage that.
Narrow-barred Spanish mackerelOP
What do you mean by regular server-side functions? Functions that can only be called on the server or API routes?
I know Server Actions aren't meant for Fetching, but they work 95% of the time
And it's literally so much easier than anything else
If API routes are the only alternative, I guess I'll stick to using server actions but without the suspend stuff
Yeah just a function that is only meant for the Server Environment, which you can enforce using the
server-only packageCan you describe your use case, what are you trying to do, fetch data on the client from the server based on an interaction or on mount?
Narrow-barred Spanish mackerelOP
When someone goes on a page, I have data I need to dynamically fetch and render on the page. I don't want to await all the data and basically block rendering, but rather lazy load parts of the page.
I could just use swr or react query as is but i also want to start the fetching of the data on the server side
because i already know what to fetch on the server, i just don't have the data yet
shuding made an awesome example of this, ill look up the tweet
Narrow-barred Spanish mackerelOP
This basically has everything i need except that it doesn't work with Suspense
Initiate the promise on the server then unwrap/consume it on the client using the
use API from react, it will suspend the component until the data is ready to be used.
If you need Suspense with swr: https://swr.vercel.app/docs/suspense
Narrow-barred Spanish mackerelOP
They link the issue that I mentioned in my OG post
This means that you can't use Suspense to fetch data on the server side, but either doing fully client-side data fetching, or fetch the data via the framework level data fetching method(such as getStaticProps in Next.js).
But in my head there's no real reason why it wouldnt be possible
I mean i can start fetching something on the server and pass it as a promise prop to a component
That's what
use is forNarrow-barred Spanish mackerelOP
and then i can use it in a client component or await it in a server component
I know but then I can't use SWR anymore
and I have to prop drill
How deep?
Narrow-barred Spanish mackerelOP
Which I could do theoretically but then I'm missing out on refetching things
and all the other swr features
Fetch initial data server side with Suspense, pass that initial data as fallback data to swr
This is a very common practice
Narrow-barred Spanish mackerelOP
you mean i use the initial data in the client component and then pass it directly to swr as initial data?
Yes
Swr documentation has an example, lemme grab it
Narrow-barred Spanish mackerelOP
Ok well I just tried again using suspense: true and it works again
Nvm it doesn’t have an example, but basically I meant this (on phone so not strictly following js syntax)
async function Page()
data = await getData()
return <ClientComp initialData={data} />
function ClientComp({ initialData }) {
useSWR(…, { fallbackData: initialData })
async function Page()
data = await getData()
return <ClientComp initialData={data} />
function ClientComp({ initialData }) {
useSWR(…, { fallbackData: initialData })
Then that Page component you can use a suspense boundary
Narrow-barred Spanish mackerelOP
SSR fully works and in the client you can revalidate you can do whatever you want, swr fully works there
Narrow-barred Spanish mackerelOP
Yesterday or so i tried using suspense: true and data returned this
Which looks like an incomplete server action/promise fragment(?)
I just rawdogged console.log in the component function
and the first 2-3 renders logged this and then the normal data
so I'm not really sure what happened there but it doesn't happen anymore
I wouldn’t touch whatever happens behind the scenes. It’s not something we need to think about.
Narrow-barred Spanish mackerelOP
Well yeah i know
but this was literally "data"
of useSWR
const {data} = useSWR(...)
Thats why it was unusable for me
And i just thought welp, maybe suspense: true broke during some next update
because the big issue on github also mentioned that its not really a perfect solution
Oh, welp that doesn’t look correct
Narrow-barred Spanish mackerelOP
Yeah I really have no idea what happened there
I mean it says "Promise" as a prototype
But data shouldnt return a promise
At least it isnt typed that way
Ok well it works now, if it happens again i'll try to make a repro
Tyvm!