Next.js Discord

Discord Forum

Filters doesnt work after build

Unanswered
Bartholomeas posted this in #help-forum
Open in Discord
BartholomeasOP
Hello, for some reason my filters are working correctly during development,but doesnt after build..

Entire page is with 'use client', but after build its generated as a "SSG"

Heres snippet: 
'use client'

export const dynamic = 'force-dynamic'
export const revalidate = 1

type UserProfileAuctionsProps = {
  params: { userId: string }
  searchParams: TApiQueryParams
}

const UserProfileAuctions = ({ params: { userId }, searchParams }: UserProfileAuctionsProps) => {
  const query = useGetUserPublishedOffers(userId, searchParams)

  return (
    <>
      <PublishedOffersSortingFilters />
      <QueryPaginated.Wrapper<TPublishedOffer> query={query}>
        <QueryPaginated.Data>
          <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }}>
            {query.data?.items?.map((offer: TPublishedOffer) =>
              offer.type === 'Advertisement' ? (
                <PublishedOffersAdvertisementCard key={offer.id} data={offer} hideBuyButton />
              ) : (
                <PublishedOffersAuctionCard key={offer.id} data={offer} hideBuyButton />
              ),
            )}
          </SimpleGrid>
        </QueryPaginated.Data>
        <QueryPaginated.NoData title="Brak wyników" />
      </QueryPaginated.Wrapper>
...rest of the code


Do you have any ideas whats going on? 🤔

9 Replies

BartholomeasOP
Thats my request:

import { useQuery } from '@tanstack/react-query'

import { axiosApi } from 'api-axios/axiosInstance'

import { offersQueryKeyFactory } from './_offersQueryKeys'

import type { TPublishedOffer } from './types'
import type { TApiPaginatedResponse, TApiQueryParams } from 'misc/types/api'

const getUserPublishedOffers = (userId: string | undefined, searchParams: TApiQueryParams) => {
  if (!userId)
    return Promise.reject(new Error('getUserPublishedOffers: userId is undefined or null').message)

  return axiosApi
    .get<TApiPaginatedResponse<TPublishedOffer>>(`/published-offers/users/${userId}/public`, {
      params: searchParams,
    })
    .then(({ data }) => data)
}

export const useGetUserPublishedOffers = (
  userId: string | undefined,
  searchParams: TApiQueryParams,
) =>
  useQuery({
    queryKey: offersQueryKeyFactory.list([userId, searchParams]),
    queryFn: () => getUserPublishedOffers(userId, searchParams),
  })
@joulev Many segment configs are not compatible with use client pages. Keep the page a server component and make a page.client.tsx that contains actual page code
BartholomeasOP
Hmm, ok, i've deleted 'use client' directive and did it like before, but i have another problem.

My page have card children (name it "A"), this A have children B. B have 'use client' which is passing prop 'isFavorite' from parent to its children (component C). C is handling add/delete isFavorite but how can i make it reactive, when im passing server props to client component?
How can i get current value?
And the problem is in server request every record in returned array have 'isFavorite: false' (its assigned to logged in user) but its not true, some of them have 'isFavorite: true'
And its kind of serverside fetching ?
joulev
This is a separate problem, please open a separate post
And you’ll need to make a minimal example for the question in that post, because it’s quite unclear to me just from your description
BartholomeasOP
thanks!