How to do mutation on page load?

[unclekingpin]

Hi everyone, I have a usecase in my app which seems to be not that easy to solve with React and ReactRouter (or at least not to me) and i was hoping you can help me.
I have a route in my react app that must read a token from the url and execute a mutation once (POST request), based on the result it must redirect to a different page in the app. The token is meant to be used once. If the request is executed again with the same args it will fail.

• server-side: In my case its not possible to delegate that job to the server as its just a simple static files hosting (similar to GitHub pages for example)
• useEffect: i don't even want to consider this as an option as its executed twice in development mode for a reason and guarding it with a ref is not OK also
• router.subscribe: i've tried to used that too, but its marked as private in the doc and i dont know if the api will remain as is in future versions + "multiple monitoring events may be triggered from a single routing event emission".
• The new Event API might be a better alternative to .subscribe but its not live yet.
• custom web element: at some point i was considering to implement a custom web element that dispatches a submit event from the connectedCallback on the next animation frame. Then render that element inside a form and execute the mutation in its onSubmit. It seems a bit overengineered solution.

connectedCallback() {
  // TODO cancel animation frame in disconnectedCallback
  requestAnimationFrame(() => {
    if (this.parentElement instanceof HTMLFormElement) {
      this.parentElement.dispatchEvent(
        new Event("submit", {
          bubbles: true,
          cancelable: true,
        }),
      )
    }
  })
}

• loader: this seems to be my last option. My only concern here is if the loader and shouldRevalidate are not called in some useEffect somewhere. I read that those are meant to be used for GET queries, while for mutations it recommended to use actions. So when exactly are the loaders triggered? Is it possible to be triggered multiple times if shouldRevalidate allways returns false?

What other options are there?

[sergiodxa]

I would do it on the loader, if the route is going to redirect then the loader is unlikely to be revalidated. The app will load, RR will match your route, it will run the loader, it will do the mutation and redirect, if the token is not on the URL it can redirect to a separate error page.

[unclekingpin]

That is exactly what i end up doing. I just hope that loader wont be called with the same args twice, bypassing the revalidation function for some reason 🤞