Upgrade react-query to v3

[flybayer]

What do you want and why?

We need to upgrade to react-query v3. This is a fairly sizable task and will required some typescript skills.

Possible implementation(s)

Read the v2 to v3 migration guide and makes all changes required.

• Upgrade react-query v3
• Add new queryClient providers
• Update types for our useQuery hooks (there's some types renamed, etc in v3)
• Add new useQueries hook
• Change template to use useQueryErrorResetBoundary
• ... any other changes needed
• Update our docs for all changes

To Figure Out

• How to instantiate a QueryClient that we can use internally but also allow users to pass config to.
  • Maybe we export a new <App> component that user's must include at the root of their _app component and then this new <App> component can take react-query config as as a prop?
• How to automatically integrate ssr cache hydration?
  • https://react-query.tanstack.com/guides/ssr
  • Either add Hydrate to new <App> component as in previous point or in https://github.com/blitz-js/blitz/blob/canary/packages/core/src/blitz-app-root.tsx

[philipj93]

How about something like this for allowing the user to specify both the query client and opt into the hydration by passing the client and dehydrated state as props to a custom QueryProvider component:

import type { FC } from 'react'

import { QueryClient, QueryClientProvider } from 'react-query'
import { Hydrate } from 'react-query/hydration'

interface Props {
  client: QueryClient
  state?: unknown
}

const QueryProvider: FC<Props> = ({ client, state, children }) => (
  <QueryClientProvider client={client}>
    <Hydrate state={state}>
      {children}
    </Hydrate>
  </QueryClientProvider>
)

export default QueryProvider

and then in _app.tsx we can just let the user define the queryClient or provide one like this:

const queryClient = new QueryClient()

function MyApp({ Component, pageProps, router }: CustomAppProps) {
  const { reset } = useQueryErrorResetBoundary()
  const getLayout = Component.getLayout || ((page) => page)

  return (
    <ErrorBoundary FallbackComponent={RootErrorFallback} resetKeys={[router.asPath]} onReset={reset}>
      <QueryProvider client={queryClient} state={pageProps.dehydratedState}>
        {getLayout(<Component {...pageProps} />)}
      </QueryProvider>
    </ErrorBoundary>
  )
}

export default MyApp

I use this approach now in my Next.js apps and like it 🥳

[flybayer]

@tundera yes that is close to what I was picturing except that we need to own the queryCache internally so it can be used outside the react tree.

But now that I'm thinking more about it, I think we can do this with just a config object. And then in a babel plugin we'll wrap the default export like withBlitz(MyApp, config).

import {AppConfig} from 'blitz'

export const config: AppConfig = {
  queryClient: {
    //...all query client options except cache
  }
}

function MyApp({ Component, router }: CustomAppProps) {
  const { reset } = useQueryErrorResetBoundary()
  const getLayout = Component.getLayout || ((page) => page)

  return (
    <ErrorBoundary FallbackComponent={RootErrorFallback} resetKeys={[router.asPath]} onReset={reset}>
      {getLayout(<Component {...pageProps} />)}
    </ErrorBoundary>
  )
}

export default MyApp

But then actually why not just put that config inside blitz.config.js along with everything else?

[philipj93]

@flybayer That makes sense that the cache would need to be internal. I like your idea of wrapping the default export in a withBlitzApp function. A nice side-effect of that approach is that it would simplify the process of moving existing Next apps to Blitz.