useFetcher doesn't call resource route

[ziimakc]

I think I'm missing something here, why layout fetcher is calling root GET loader instead /user/logout POST action?

// routes/user.logout.ts
export async function action() {
  console.error(1);  // never called
}

// root header component
  const logout = useFetcher();

  useEffect(() => {
    console.error(logout.formAction); // `/` --- why not "/user/logout" ?
    console.error(logout.data); // root loader data
  }, [logout]);

<div
        onClick={() => {
          logout.submit({
            action: "/user/logout",
            method: "post",
          });
        }}
      >
        logout
</div>

[sergiodxa]

The first argument of fetcher.submit is the data you want to send, if there’s no data set it to null like

fetcher.submit(null, {
  method: "post",
  action: "/user/logout"
})

Also if you’re going to use fetcher.submit in the onClick of a button, I recommend you to instead wrap the button in fetcher.Form.

[ziimakc]

@sergiodxa omg, how did I miss that, even typescript didn't complain :/

[sergiodxa]

Well the second argument is optional (defaults to get and current route url), and the values you used are valid data you could send.

[kiliman]

Yes, even TypeScript won't save you if your function signature is too flexible.