How to fetch a loader under a path which include dynamic segments?

[CurryYangxx]

I have router like this.

{
  path: "parent",
  children: [
    {
      path: ":parentId",
      children: [
        {
          index: true,
          Component: ParentComponent,
        },
        {
          path: "loader",
          loader: async ({ params }) => {
            return { parentId: params.parentId };
          },
        },
      ],
    },
  ],
}

In ParentComponent, I want to fetch some data whenever parentId changes. The first approach I tried was like this, but the loader didn't revalidate when the parentId changed.

  const fetcher = useFetcher()

  useEffect(() => {
    if (fetcher.state === "idle" && !fetcher.data) {
      fetcher.load(`/parent/${parentId}/loader`);
    }
  }, [fetcher]);

Then I pass a key into useFetcher. But every parentId loader only fetch once. I look into useFetcher source code here, we delete the fetcher after fetcherKey change, but we didn't delete data from fetcherData in router.deleteFetcher.

  const fetcher = useFetcher( { key: parentId } )

  useEffect(() => {
    if (fetcher.state === "idle" && !fetcher.data) {
      fetcher.load(`/parent/${parentId}/loader`);
    }
  }, [fetcher]);

So my questions are:

1. How to fetch a loader under a route with dynamic parameters?
2. should we delete fetcher data from fetcherData after fetcherKey change?

[sergiodxa]

If your effect doesn't have parentId as a dependency it won't run again when that change, aside of that your condition will also prevent the fetcher.load to run again because it already has data.

Instead of using a fetcher I recommend you to load the data in the route loader itself, not move it to another route and fetch with a fetcher client-side.

[CurryYangxx]

For example, I need dataA and dataB two types data in component. And I will update dataA by action submit in useEffect. I only want to refetch '/a' but because of revalidation, '/b' also will be fetched.
Using fetcher client-side. I can move dataB loading from route loader to another route, so that I can use shouldRevalidate to control if we need to loading dataB.

const loader = async () => {
  const dataA = await fetch('/a');
  const dataB = await fetch('/b');
  return { dataA, dataB }
}

const Comp = () => {
  useEffect(() => {
    fetcher.submit('/a/update');
  }, [])
}

So should I run fetcher.load every time when parentId change? Or is there a better solution？

const fetcher = useFetcher();
useEffect(() => {
    fetcher.load(`/parent/${parentId}/loader`);
  }, [fetcher.load, parentId]);