New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
With React Query: Invariant: headers() expects to have requestAsyncStorage, none available. #1649
Comments
I have figured out. The actions.ts: "use server";
export const fetchSettings = async () => {
const { data } = await client.GET("/api/settings/config-properties");
return data;
}; My client component: "use client";
import { fetchSettings } from "@/lib/actions";
import { useQuery } from "@tanstack/react-query";
const { isPending, error, data, isFetching } = useQuery({
queryKey: ["getConfigProperties"],
queryFn: async () => fetchSettings(),
}); I don't know why needed like this in my case, but maybe worth a note somewhere in the docs. |
@borzaka That’s a good find! Maybe this would be a good addition to |
Every other example I found with Next.js and React Query, the app/page.tsx import PostForm from "@/components/post-form"
import Posts from "@/components/posts"
import { fetchPosts } from "@/server/actions/create-post"
import {
QueryClient,
HydrationBoundary,
dehydrate,
} from "@tanstack/react-query"
export default async function Home() {
const queryClient = new QueryClient()
await queryClient.prefetchQuery({
queryKey: ["posts"],
queryFn: fetchPosts,
})
return (
<main>
<HydrationBoundary state={dehydrate(queryClient)}>
<PostForm />
<Posts />
</HydrationBoundary>
</main>
)
} server/actions/create-post.ts "use server";
export const fetchPosts = async () => {
const posts = await db.query.posts.findMany({
with: {
author: true,
likes: true,
},
orderBy: (posts, { desc }) => [desc(posts.timestamp)],
})
if (!posts) return { error: "No posts 😓" }
if (posts) return { success: posts }
} And I also have problem to create type interface, to pass down props to the server side. |
Description
My stack:
Reproduction
const settingsResponse = await client.GET("/api/settings/config-properties");
My client component (components/project-card-list.tsx):
My openapi-fetch client with Middleware (lib/api/index.ts):
I have followed the examples here for Next.js App Router to create the
QueryClientProvider
:https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr
It works fine with native fetch:
What am I missing?
Expected result
Work as intended in client component with React Query.
Checklist
The text was updated successfully, but these errors were encountered: