Next.js Discord

Discord Forum

On initial load fetch data from different endpoint.

Unanswered
Basset Artésien Normand posted this in #help-forum
Open in Discord
Basset Artésien NormandOP
I'd like to know the best practice for achieving something like this:

export default async function Page({
  searchParams: { query = '', page = '1' },
}: Props) {
  const currentPage = Number(page)
  const { data } = await api.tmdbRouter.searchSerie.query({
    query,
    page: currentPage,
  })

  // on initital load / empty query parameter
  const { data: data2 } = await api.tmdbRouter.popularMovies.query({
    page: currentPage,
  })

  if (!data || !data.results || data.results.length === 0) {
    return <EmptyState />
  }

  return (
    <CardsContainer>
      {data.results.map((m) => {
        return <Card key={m.id} {...mapTmdbToCard(m)} />
      })}
    </CardsContainer>
  )
}

1 Reply

Basset Artésien NormandOP
is this a good way to solve it?
export default async function Page({
  searchParams: { query = '', page = '1' },
}: Props) {
  const currentPage = Number(page)

  const fetchData = async () => {
    const response = await (query
      ? api.tmdbRouter.searchSerie.query({ query, page: currentPage })
      : api.tmdbRouter.popularSeries.query({ page: currentPage }))
    return response
  }

  const { data, error } = await fetchData()

  if (!data || !data.results || data.results.length === 0) {
    return <EmptyState />
  }

  return (
    <CardsContainer>
      {data.results.map((m) => {
        return <Card key={m.id} {...mapTmdbToCard(m)} />
      })}
    </CardsContainer>
  )