How to use parseAsJson with yup?

[JSFTI]

I tried cast, validate, and validateSync, but none of them produces the object. All of them returned null even though the query string has the correct JSON string. It works with zod, but I would prefer to not migrate since I have a lot of schema in yup.

CodeSandbox

Press the "Set Data" button. All states should update to the hard coded object. However, if the page refresh button is pressed, all yup state is set to null. It should still be set to the object since the JSON string exists in the URL. It works with Zod.

Screencast.from.24-01-25.10.58.07.webm

[franky47]

I see, from looking at the Yup validateSync code, it needs binding to the schema instance to keep the this reference:

const [yupValidateSync, setYupValidateSync] = useQueryState(
  'yupValidateSync',
  parseAsJson(yupSchema.validateSync.bind(yupSchema))
)

Note that yupSchema.validate will not work as it returns a Promise (and nuqs parsers are synchronous).