Loading Data From a Resource Route with useFetcher

[neohed]

Hi,
I've modified the "Developer Blog" tutorial.

I created a resource route: routes/categories/index.ts

export const loader: LoaderFunction = async () => {
  const cats = await getCategories()
console.log('Loader Called!')
  return json({
    cats,
  })
}

Then I call this in a modal

const fetcher = useFetcher();

  useEffect(() => {
    if (fetcher.type === "init") {
      fetcher.load('/categories');
    }
    if (fetcher.type === "done") {
      console.log('Loaded!')
      console.log(fetcher.data)
    }
  }, [fetcher]);

The fetcher issues this GET request against the server:

GET /categories?_data=root 200

But, the data it returns is a user object. The console.log inside the resource route isn't called so it seems we're not getting there.

Somehow useFetcher is finding a user object somewhere, I've actually no clue what it's calling for that data!

Any clue what's going wrong? IF not, how do I even debug this?

Thanks,

[neohed]

Solved it, mostly. I changed the URL to go directly. I thought the default routing would work here, but it seems index.ts was ignored.

[kiliman]

When Remix calls an index route via fetcher.load or a POST, you must include ?index i.e., /categories?index. Otherwise, Remix will call the parent route (in this case root).

The reason is that a URL like / is ambiguous, in that it can refer to index.tsx or the root.tsx layout. On normal navigations, this is fine since Remix will call both loaders. However for POST or fetcher.load it can only call a single route, so it always chooses the parent route.

Oddly, if you don't have BOTH categories.tsx and categories/index.tsx then the URL /categories doesn't seem like it would be ambiguous. I think Remix always uses the parent id in the route config (which in your case was root) if the matching route is an index route and you don't specify ?index.

So the rule of thumb is to always add ?index if you want the index route, regardless of where it is in the route hierarchy.

Anyway, hope this explains why Remix worked that way.

[neohed]

Right, now the parameter ?_data=root Remix appended to the GET request makes more sense.

Thanks for the explanation.

[kiliman]

1. Your question explicitly asked about the categories/index.ts route. ?_data=root is calling the root loader
2. Appending ?index is the documented way to call an index route. https://remix.run/docs/en/v1/guides/routing#what-is-the-index-query-param
3. The ?_data param is an undocumented implementation detail and may change, so you should not rely on it.