kajtek0 Posts - Answer Overflow

kajtek0

•Created by kajtek0 on 2/28/2024 in #questions

PostgreSQL, NextJs data filtering

I am working on a search functionality and I've found myself stuck. I have two "search fields" first one to insert a query and the second one to select a category. I want to implement a train of thought like this "If there is a category i want to filter where the category = category and query Ilike query but if there is no category i want to filter where query ILIKE query only. Looks easy on paper however i have found myself really not knowing how to do it. I've tried adding conditionals appending to a query string that i create in a function but i keep getting errors? Any ideas? That's what i have now


const events = await sql<Event>

SELECT event_id, author_id, title, description, price, is_free, location, start_date, end_date, category, max_places, image_url FROM event WHERE title ILIKE ${%${query}%} OR description ILIKE ${%${query}%} OR location ILIKE ${%${query}%} OR price::text ILIKE ${%${query}%}

2 replies

TTCTheo's Typesafe Cult

•Created by kajtek0 on 1/15/2024 in #questions

Suspense boundary and caching

Hi guys, I am building an application with nextjs and prisma at the moment. I have come across a problem that I think is related to caching behavior. Thing is, I have a page.tsx that shows all of the listings.


export default function Home({
  searchParams,
}: {
  searchParams?: {
    category?: string;
  };
}) {
  return (
    <main className="flex flex-1 py-10">
      <RentForm />

      <Container>
        <Suspense fallback={<ListingsSkeleton />}>
          <ListingsList filters={{ category: searchParams?.category }} />
        </Suspense>
      </Container>
    </main>
  );
}

As you can see ListingsList component is indeed wrapped in a suspense boundary with a skeleton fallback. My listings list component uses the "unstable_noStore" from nextjs to prevent caching like so:


export default async function ListingsList({
  filters: { category },
}: ListingsListProps) {
  unstable_noStore();
  const listings = await getAllListings({ category });

  return (
    <ul className="grid gap-7 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6">
      {listings.map((listing) => (
        <ListingItem key={listing.id} listing={listing} />
      ))}
    </ul>
  );
}

However, it seems like my result is still cached as I can't see neither skeleton loader nor any fallback provided to the suspense. Not even a flicker. I have tried adding unstable_noStore() to the function getAllListings itself but it doesnt solve the problem either. Any help would be greatly appreciated. Have a good evening!

2 replies

Gaming

Programming