blitz-js / next-superjson-plugin

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

_app.tsx not getting parsed data #54

Closed tzelon-cypator closed 1 year ago

tzelon-cypator commented 1 year ago

Verify Next.js canary release

Describe the bug

I'm using getServerSideProps to fetch some data and return it in props and in the _app.tsx file I want to use that data. The problem is, I have a few bigint properties in the data but in the _app.tsx file bigint are still strings. I checked on the page itself and the data are parsed as expected bigint are bigint.

Expected behavior

parsed the data.

Reproduction link

No response

Version

0.4.9

Config

experimental: {
      swcPlugins: [
        [
          "next-superjson-plugin",
          {
            excluded: [],
          },
        ],
      ],
    },

Additional context

next: v12.3.2-canary.43

orionmiz commented 1 year ago

Do you want to get deserialized props by reading pageProps of AppProps?

If so, use the deserializeProps utility function.

// _app.tsx
import type { AppProps } from "next/app";
import { deserializeProps } from 'next-superjson-plugin/tools'

export default function App({ Component, pageProps }: AppProps) {
  const deserialized = deserializeProps(pageProps);
  // ...
  return <Component {...pageProps} />;
}
tzelon-cypator commented 1 year ago

It seems like it stringify bigints as strings, but in the _app.tsx I get a simple deserialize object with the bigints still as string. the object I return from getServerSideProps

{
  id: 1,
  version: 1,
  price_min: 1n,
  price_max: 999999999n,
  size_min: 1n,
  size_max: 9999999999999n,
}

what I receive in _app.tsx

{
  id: 1,
  version: 1,
  price_min: "1",
  price_max: "999999999",
  size_min: "1",
  size_max: "9999999999999",
}
orionmiz commented 1 year ago

That's the expected consequences, not the bug.

See the _superjson property that might be included in the received value:

{
  id: 1,
  version: 1,
  price_min: "1",
  price_max: "999999999",
  size_min: "1",
  size_max: "9999999999999",
  _superjson: {values: {…}} // this property contains type data
}

Actual deserialization is being done by the component in the way of referring to the _superjson property. So you should deserialize the pageProps manually to take the original props, especially within _app.tsx.

If you can't find _superjson property in the received value or the solution above wasn't helpful, please provide a minimal reproduction, I'll take a look at it.