Next.js Discord

Discord Forum

Mock data fetching with tanstack query in next.js pages router

Unanswered
Spectacled Caiman posted this in #help-forum
Open in Discord
Original message was deleted.

2 Replies

Cape horse mackerel
So, when you change the path to relative, it's working?
Why don't you put the mock data within api?
// /api/mock/products/route.ts

export async function GET() {
  return NextResponse.json({
      // mocked data goes here
      "id": 1,
      "name": "product 1",
  })
}

// use query hook
export const useProductData = () => {
  const { data, isLoading, error } = useQuery({
    queryKey: ["products"],
    queryFn: async (): Promise<ProductData> => {
      const res = await fetch("/api/mock/products")
        .then((res) => res.json())
        .catch((er) => console.log(er));
      console.log(res);
      return res;
    },
  });
  return {
    productData: data,
    productDataIsLoading: isLoading,
    productDataError: error,
  };
};