blitz-js / next-superjson-plugin

SuperJSON Plugin for Next.js Pages and Components
192 stars 13 forks source link

SWC should transform pageProps from _app.tsx #72

Open pixelpax opened 1 year ago

pixelpax commented 1 year ago

Verify Next.js canary release

Describe the bug

In order to use patterns like react-query prefetch, the transform must happen in _app.tsx, as well as in the specific pages.

In this and other common patterns, _app.tsx may be passing some pageProps into global providers.

As it is currently, pageProps will be passed into global providers untransformed, leading to difficult to solve bugs.

export default function App({ Component, pageProps }: AppProps) {

     return ( <QueryClientProvider client={rssQueryClient}>
        <Hydrate state={pageProps.dehydratedState}>
              <Component {...pageProps} />
        </Hydrate>
      </QueryClientProvider>);
}

Expected behavior

I would expect pageProps to be transformed when received by _app.tsx

Reproduction link

No response

Version

"next-superjson-plugin": "^0.5.6"
"superjson": "^1.12.2",

Config

const nextConfig = {
  experimental: {
    swcPlugins: [
      [
        'next-superjson-plugin',
        {
          excluded: []
        }
      ]
    ]
  },
  output: 'standalone'
};

Additional context

An easy workaround for the time being is to do something like

  const fixedPageProps = useMemo(() => superjson.deserialize({
    json: pageProps,
    meta: pageProps._superjson
  }) as AppProps["pageProps"], [pageProps]);

and use fixedPageProps where pageProps would be inserted normally. Hopefully this is helpful for someone, though I do feel strongly that this should be solved by the SWC as default behavior.