Next.js Discord

Discord Forum

dinamic route broken with react query

Unanswered
Black Mouth Cur posted this in #help-forum
Open in Discord
Black Mouth CurOP
any idea why this doesn't work in a client component?
"use client";
import { formatPrice, toTitleCase } from "@/lib/utils";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { Separator } from "@/components/ui/separator";
import { Breadcrumbs } from "@/components/pagers/breadcrumbs";
import { Container } from "@/components/containers/mainContainer";
import { ProductImage } from "@/components/product-image";
import { Button } from "@/components/ui/button";
import { useCollectionListingFetch } from "@/api/products/collection.listing.query";
import { notFound } from "next/navigation";

interface ProductPageProps {
    params: {
        productId: number;
    };
}

export default function ProductPage({ params }: ProductPageProps) {
    const { data: product } = useCollectionListingFetch().useProductByCollectionId(params.productId);
    console.log("🚀 - file: page.tsx:27 - ProductPage - initialData:", product);

    if (!product) {
        return notFound;
    }
    return (...)
}

8 Replies

European sprat
it would help to see what's going on in useCollectionListingFetch
not-milo.tsx
Where's that coming from?
Black Mouth CurOP
here
import { useQuery } from "@tanstack/react-query";
import { httpCall } from "..";
import { CollectionListingAll, CollectionListingData, Product } from "./types";
import { env } from "@/env.mjs";

export const useCollectionListingFetch = () => {
    return {
        useGetAllCollectionListing: (initialData?: CollectionListingAll) => {
            return useQuery({
                suspense: true,
                initialData: initialData,
                queryKey: ["useGetAllCollectionListing"],
                queryFn: () =>
                    httpCall<CollectionListingAll>({
                        genericPath: `${env.NEXT_PUBLIC_COLLECTION_LIST}collection_listings.json`,
                        type: "getAll",
                    }),
            });
        },

        useProductByCollectionId: (product_id: CollectionListingData["default_product_image"]["product_id"]) => {
            return useQuery({
                suspense: true,
                queryKey: ["useProductByCollectionId"],
                queryFn: () =>
                    httpCall<Product>({
                        genericPath: `${env.NEXT_PUBLIC_PRODUCT_DETAILS}${product_id}.json`,
                        type: "getAll",
                    }),
            });
        },
    };
};
it takes the useProductByCollectionId
European sprat
i see you have suspense true and the error mentions an error at updateDehdryatedSuspenseComponent so maybe try disabling suspense and see if it works
there's a lot of stuff going on there, i'd try and simplify things down to an absolute minimum, see if it works, then go from there
Black Mouth CurOP
ok thx