How do you pre-fetch with getServerSideProps while using usePaginatedQuery?

[jmacdonagh]

What is the proper way to pre-render a page that will use usePaginatedQuery? I've tried a few methods and the best I can come up with is sort of a hack. This page needs to be pre-rendered on each request so I'm using getServerSideProps.

I first tried pre-fetching using a QueryClient, although I wasn't sure if this was supported outside of getStaticProps.

import { QueryClient, getQueryKey, usePaginatedQuery, dehydrate, invokeWithMiddleware } from 'blitz'
import { useState } from 'react'
import getProjects from 'app/queries/getProjects'

export const getServerSideProps = async ({ req, res }) => {
  const queryClient = new QueryClient()
  const queryKey = getQueryKey(getProjects)

  const skip = 0
  const take = 10

  await queryClient.prefetchQuery(
    queryKey,
    async () => await invokeWithMiddleware(getProjects, { skip, take }, { req, res })
  )

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

function ProjectPage() {
  const [skip, setSkip] = useState(0)
  const [take] = useState(10)
  const [{ projects }] = usePaginatedQuery(getProjects, { skip, take })

  return (
    <>
      {projects.map((p) => (
        <div key={p.id}>{p.id}</div>
      ))}
      <div>
        <button onClick={() => setSkip(skip + take)}>Next</button>
      </div>
    </>
  )
}

export default ProjectPage

This results in a runtime error "Error: A React component suspended while rendering, but no fallback UI was specified." So, the query didn't think it had some results to give me on the first pass.

If I don't allow suspense:

const [results] = usePaginatedQuery(getProjects, { skip, take }, { suspense: false })

if (results == undefined) {
  console.log('null')
  return null
} else {
  console.log('results')
}

then I see the log message "null" on the server console (and never "results"). The server isn't able to pre-render the page. So clearly pre-fetching isn't allowed here.

I then tried fetching initial data and using the initialData option.

import { QueryClient, dehydrate, getQueryKey, invokeWithMiddleware, usePaginatedQuery } from 'blitz'
import { useState } from 'react'
import getProjects from 'app/queries/getProjects'

export const getServerSideProps = async ({ req, res }) => {
  const skip = 0
  const take = 10

  const initial = await invokeWithMiddleware(getProjects, { skip, take }, { req, res })

  return {
    props: {
      initial,
    },
  }
}

function ProjectPage({ initial }) {
  const [skip, setSkip] = useState(0)
  const [take] = useState(10)
  const [{ projects }] = usePaginatedQuery(
    getProjects,
    { skip, take },
    { initialData: initial, keepPreviousData: true }
  )

  return (
    <>
      {projects.map((p) => (
        <div key={p.id}>{p.id}</div>
      ))}
      <div>
        <button onClick={() => setSkip(skip + take)}>Next</button>
      </div>
    </>
  )
}

export default ProjectPage

This results in the same suspense runtime error.

The only way I've gotten this it work is a bit of a hack:

  const [results] = usePaginatedQuery(
    getProjects,
    { skip, take },
    { initialData: initial, keepPreviousData: true, suspense: false }
  )

  if (results == undefined) {
    console.log('null')
    return null
  } else {
    console.log('results')
  }

When I do this, I do not see "null" in the server console, it appears to get the results right away. I also never see "null" on the client console.

So this apparantly works, the client is given a pre-rendered page and it is able to properly paginate. However this seems like a hack. I'm relying on the behavior that the usePaginatedQuery with initialData and suspense: false won't actually return undefined.

Am I going about this the wrong way?

For completeness, the query is defined as:

import { paginate, resolver } from "blitz"
import db, { Prisma } from "db"

interface GetProjectsInput
  extends Pick<
    Prisma.ProjectFindManyArgs,
    "where" | "orderBy" | "skip" | "take"
  > {}

export default resolver.pipe(
  resolver.authorize(),
  async ({ where, orderBy, skip = 0, take = 100 }: GetProjectsInput) => {
    const {
      items: projects,
      hasMore,
      nextPage,
      count,
    } = await paginate({
      skip,
      take,
      count: () => db.project.count({ where }),
      query: (paginateArgs) =>
        db.project.findMany({ ...paginateArgs, where, orderBy }),
    })

    return {
      projects,
      nextPage,
      hasMore,
      count,
    }
  }
)

Thanks!

[flybayer]

@jmacdonagh thanks for the thorough description and code!

I think you are essentially doing this right except for one thing.

You have getQueryKey(getProjects) for prefetch but then you have { skip, take } as the second useQuery arguments in the component. Those two calls must be exactly the same to fill the right cache key. Query cache key depends on the query arguments.

So I think this change should resolve it for you

-const queryKey = getQueryKey(getProjects)
+const queryKey = getQueryKey(getProjects, {skip: 0, take: 10})

Try that and report back. Could be something else amiss I haven't noticed.

[jmacdonagh]

Thanks for the reply. I tried that and I still get the suspense error. Here's what I have:

import { QueryClient, dehydrate, getQueryKey, invokeWithMiddleware, usePaginatedQuery } from 'blitz'
import { useState } from 'react'
import getProjects from 'app/queries/getProjects'

const INITIAL_FILTER = { skip: 0, take: 10 }

export const getServerSideProps = async ({ req, res }) => {
  const queryClient = new QueryClient()
  const queryKey = getQueryKey(getProjects, INITIAL_FILTER)
  console.log(queryKey)

  await queryClient.prefetchQuery(
    queryKey,
    async () => await invokeWithMiddleware(getProjects, INITIAL_FILTER, { req, res })
  )

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

function ProjectPage() {
  const [{ projects }] = usePaginatedQuery(getProjects, INITIAL_FILTER)

  return (
    <>
      {projects.map((p) => (
        <div key={p.id}>{p.id}</div>
      ))}
    </>
  )
}

ProjectPage.authenticate = true
ProjectPage.suppressFirstRenderFlicker = true

export default ProjectPage

BTW I'm on blitz 0.41.0

[flybayer]

ok thanks, we will investigate. Someone else reported this too.