Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: shouldRevalidate behaves differently on production then development #10197

Closed
FFGFlash opened this issue Mar 13, 2023 · 3 comments
Closed
Labels

Comments

@FFGFlash
Copy link

FFGFlash commented Mar 13, 2023

What version of React Router are you using?

v6.8.0 - v6.9.0

Steps to Reproduce

  1. Create Project using createBrowserRouter()
  2. Create 2 Routes
const Routes = [
  {
    path: '/',
    children: [
      {
        path: 'one',
        element: <RouteOne />
      },
      {
        path: 'two',
        action: () => {},
        loader: () => 'Hello World!',
        shouldRevalidate: ({ currentUrl, nextUrl, formAction }) => {
          console.log('current: ', currentUrl.pathname)
          console.log('next: ', nextUrl.pathname)
          console.log('action: ', formAction)
          const shouldRevalidate = currentUrl.pathname !== nextUrl.pathname || currentUrl.pathname === formAction
          console.log('shouldRevalidate: ', shouldRevalidate )
          return shouldRevalidate 
        }
      }
    ]
  }
]

const Router = createBrowserRouter(Routes)
  1. Create two fetchers on route one
function RouteOne() {
  const loaderFetcher = useFetcher();
  const actionFetcher = useFetcher();

  useEffect(() => {
    if (loaderFetcher .data || loaderFetcher .state !== "idle") return;
    loaderFetcher .load("/two");
  }, [loaderFetcher ]);

  const handleSomeAction = actionFetcher.submit(
    { data: "some data" },
    { action: "/two", method: "post" }
  );

  return (
    <>
      <div>{fetcher.data || "Loading..."}</div>
      <button onClick={handleSomeAction}>Some Action</button>
    </>
  );
}

Expected Behavior (v6.7.0)

Expected behavior is that when we use the actionFetcher to submit to '/two' it should revalidate the loaderFetcher given the rules of shouldRevalidate. currentUrl.pathname !== nextUrl.pathname should revalidate due to navigation of children routes and currentUrl.pathname === formAction should revalidate when the action function is called on the given route.

In the given steps to reproduce the expected result looks something like the following

current: /two
next: /two
action: /two
shouldRevalidate: true

Actual Behavior (v6.8.0 - v6.9.0)

In the versions 6.8.0 to 6.9.0 (currently latest), the currentUrl and nextUrl instead give the pathname of the rendered route instead of the route corresponding to the action and loader.

Results:

current: /one
next: /one
action: /two
shouldRevalidate: false
@FFGFlash FFGFlash added the bug label Mar 13, 2023
@FFGFlash
Copy link
Author

I now can't get this to replicate, and instead I am getting the unexpected result, unfortunately I cannot provide the code in which I'm experience the expected behavior. Though if it isn't intended, I do believe it makes more sense for the currentUrl and nextUrl provided to shouldRevalidate should be the same as the path provided to the fetcher that's checking if it should revalidate, so possible feature request? This applies to currentParams and nextParams as well

@FFGFlash
Copy link
Author

Expected behavior can be found in version 6.7.0 and is lost in version 6.8.0 (I'm guessing one of my team members updated the package and I hadn't updated on my local directory) I'm still wondering if this is an intentional change as I feel this is less intuitive?

@timdorr
Copy link
Member

timdorr commented Mar 14, 2023

This was an explicitly mentioned change in 6.8, via #9948. The reasoning is posted in that PR and also in the release note. This is functioning as intended.

@timdorr timdorr closed this as completed Mar 14, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants