How to convert initialData query to prefetch query with de/rehydration?

[zlever01]

New/hobby developer here. I have this query with initialData in next.js that I'm trying to convert to a prefetch query:

export async function getServerSideProps() {

    const {data, count} = await supabase
        .from("Products")
        .select("*", {count: "exact"})
        .order("date", {ascending: false})
        .limit(50)

    const products = {
        pages: [{data}],
        pageParams: [null],
    }

    return {
        props: {
            products: products,
        },
    };
}

const {
        data,
        isSuccess,
        isLoading,
        fetchNextPage,
        hasNextPage,
        isFetchingNextPage,
    } = useInfiniteQuery(['products', {min: debouncedMin}, {max: debouncedMax}, {sort: sort}, {color: color}, {brand: brand}, {mold: mold}], getProdcts,
        {
            getNextPageParam: (page) => {
                const total_pages = Math.ceil(page.count / 50) - 1
                if (total_pages !== page.pageParam) return page.pageParam + 1;
                return false;
            }
        },
        {initialData: products},
    )

const getProducts = async ({ pageParam = 0, queryKey} )  => {

    const minValue = queryKey[1].min
    const maxValue = queryKey[2].max
    const sortValue = queryKey[3].sort.value
    const colorValue = queryKey[4].color.map(value => value.value)
    const brandValue = queryKey[5].brand.value
    const moldValue= queryKey[6].mold

    const {from, to} = getPagination(pageParam, 50);

    const {data, count} = await supabase
        .from('Products')
        .select('*', {count: "exact"})
        .eq('brand' brandValue)
        .or(colorValue)
        .or(moldValue)
        .gte('weight', minString)
        .lte('weight', maxString)
        .order(sortValue[0], {ascending: sortValue[1]})
        .range(from, to)

    const products = {
        pages: [{data}],
        pageParams: [null],
    }

    return {
        data,
        count,
        pageParam,
        from,
        to,
    }
}

I have de/rehydration setup in _app.js and working with simple queries.

export async function getStaticProps() {
    const queryClient = new QueryClient()

    await queryClient.prefetchQuery('products',getProducts)

    return {
        props: {
            dehydratedState: dehydrate(queryClient),
        },
    }
}

const getProducts = async ()  => {

    const {data} = await supabase
        .from('Products')
        .select(`*`)

    return {
        data,
    }
}

export {getProducts}

I'm stumped on how to update the prefetch query with filters/query keys: {min: debouncedMin}, {max: debouncedMax}, {sort: sort}, {color: color}, {brand: brand}, {mold: mold}

[TkDodo]

• you need to use the exact same queryKey on the server and on the client to make hydration work
• for infinite queries, you need to use prefetchInfiniteQuery