Skip to content

context is empty in loader when queryParams has object serialized in different property order #4077

Closed
@fMads

Description

@fMads

Which project does this relate to?

Router

Describe the bug

We have a hybrid project, with the backend written in PHP and the frontend partly in React.

Because the frontend is only partly in react, we may have pages in non-React, that points to pages in React.
We try to serialize the queryParams in the same way as TanStack/Router does (basically just json_encoding), but we've found, that the order of the properties in the json_encoded data is very important (and needlessly important in our mind).

In the specific Route we have a zod schema for defining and validating the search data, but when the properties aren't in the correct order we just get a white screen.

We found the issue to be, that the loader-method doesn't receive the context when the order of the properties in the search object isn't correct.

So, lets say the the schema is:

import z from "zod";

const schema = z.object({
  foo: z.number(),
  bar: z.number(),
}};

and we call the endpoint with JSON.stringify({foo: 1, bar: 2}), then it all works.
But if we instead call with JSON.stringify({bar: 1, foo: 2}), then it doesn't work.

We've set up a codesandbox with a reproduceable codebase.

Your Example Website or App

https://codesandbox.io/p/devbox/27yztf

Steps to Reproduce the Bug or Issue

  1. Open https://codesandbox.io/p/devbox/27yztf
  2. Click the a-href: data (works fine) (in the async beforeLoad or sync beforeLoad section)
  3. See that the loaderData is filled
  4. Click the a-href: data inverted (...)
  5. See that the loaderData isn't filled
  6. Reload the page
  7. See that the loaderData is now filled (the initial click on the a-href: data inverted will go to the page with the properties inverted, but the router will automatically update the url with the properties in the correct order - so a refresh will "fix" the issue)

The only difference between the two links are the inverted order of the properties.

Expected behavior

The no matter which order the properties are JSON encoded will work just fine.
It's okay that the url is updated with the properties in the "correct" order, but the router should handle it internally and not break.

Screenshots or Videos

Recording.2025-05-02.135113.mp4

Platform

Test on

  • OS: Windows
  • Browser: Chrome
  • Version: 135

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions