+ {fetcher.state}
+ {fetcher.data ? JSON.stringify(fetcher.data) : null}
+
+
+ {fetcher.state}
+ {fetcher.data ? JSON.stringify(fetcher.data.value) : null}
+
+
+ {fetcher.state}
+ {fetcher.data ? JSON.stringify(fetcher.data) : null}
+
+ await dfd1.promise}
+ element={ await dfd2.promise}
+ element={
+ ),
+ {
+ initialEntries: ["/1"],
+ hydrationData: { loaderData: { "0": null, "0-0": null } },
+ }
+ );
+ let { container } = render(Link to 1
+ Link to 2
+
+
{JSON.stringify(fetchers.map((f) => f.state))}
+
+
+ 1{fetcher.state}
+ {fetcher.data || "null"}
+
+ fetcher.load("/1")}>load
+
+ );
+ }
+
+ function Comp2() {
+ let fetcher = useFetcher();
+ return (
+ <>
+
+ 2{fetcher.state}
+ {fetcher.data || "null"}
+
+ fetcher.load("/2")}>load
+
+ );
+ }
+
+ // Initial state - no useFetchers reflected yet
+ expect(getHtml(container.querySelector("#output")!))
+ .toMatchInlineSnapshot(`
+ "
+
+ []
+
+
+ 1
+ idle
+ null
+
+
+ load
+
+
+
+ ["loading"]
+
+
+ 1
+ loading
+ null
+
+
+ load
+
+
+
+ ["idle"]
+
+
+ 1
+ idle
+ data 1
+
+
+ load
+
+
+
+ ["idle"]
+
+
+ 1
+ idle
+ data 1
+
+
+ load
+
+
+
+ ["idle"]
+
+
+ 2
+ idle
+ null
+
+
+ load
+
+
+
+ ["loading"]
+
+
+ 2
+ loading
+ null
+
+
+ load
+
+
+
+ ["idle"]
+
+
+ 2
+ idle
+ data 2
+
+
+ load
+
+
({ fetchCount: ++fetchCount })}
+ />
+
+ ),
+ {
+ hydrationData: { loaderData: { "0": null } },
+ }
+ );
+ let { container } = render(
+ {fetcher.state}
+ {fetcher.data ? JSON.stringify(fetcher.data) : null}
+
+ fetcher.load("/fetch")}>load fetcher
+ {
+ submit({ increment: 10 }, { method: "post" });
+ }}
+ >
+ submit
+
+
+ );
+ }
+
+ expect(getHtml(container.querySelector("#output")!))
+ .toMatchInlineSnapshot(`
+ "
+ idle
+
"
+ `);
+
+ await act(async () => {
+ fireEvent.click(screen.getByText("load fetcher"));
+ await waitFor(() => screen.getByText(/idle/));
+ });
+ expect(getHtml(container.querySelector("#output")!))
+ .toMatchInlineSnapshot(`
+ "
+ idle
+ {"fetchCount":1}
+
"
+ `);
+
+ await act(async () => {
+ fireEvent.click(screen.getByText("submit"));
+ await waitFor(() => screen.getByText(/idle/));
+ });
+ expect(getHtml(container.querySelector("#output")!))
+ .toMatchInlineSnapshot(`
+ "
+ idle
+ {"fetchCount":2}
+
"
+ `);
+ });
+
+ it("handles fetcher 404 errors at the correct spot in the route hierarchy", async () => {
+ let router = createMemoryRouter(
+ createRoutesFromElements(
+ Not I!
}>
+
+ ),
+ {
+ initialEntries: ["/child"],
+ hydrationData: { loaderData: { "0": null } },
+ }
+ );
+ let { container } = render( fetcher.load("/not-found")}>load ;
+ }
+
+ function ErrorElement() {
+ let { status, statusText } = useRouteError() as ErrorResponse;
+ return contextual error:{`${status} ${statusText}`}
;
+ }
+
+ expect(getHtml(container)).toMatchInlineSnapshot(`
+ "
+
+ load
+
+
"
+ `);
+
+ fireEvent.click(screen.getByText("load"));
+ await waitFor(() => screen.getByText(/Not Found/));
+ expect(getHtml(container)).toMatchInlineSnapshot(`
+ "
+
+ contextual error:
+ 404 Not Found
+
+
Not I!
}>
+ {
+ throw new Error("Kaboom!");
+ }}
+ errorElement={Not I!
}
+ />
+
+ ),
+ {
+ initialEntries: ["/child"],
+ hydrationData: { loaderData: { "0": null } },
+ }
+ );
+ let { container } = render( fetcher.load("/fetch")}>load ;
+ }
+
+ function ErrorElement() {
+ let error = useRouteError() as Error;
+ return contextual error:{error.message}
;
+ }
+
+ expect(getHtml(container)).toMatchInlineSnapshot(`
+ "
+
+ load
+
+
"
+ `);
+
+ fireEvent.click(screen.getByText("load"));
+ await waitFor(() => screen.getByText(/Kaboom!/));
+ expect(getHtml(container)).toMatchInlineSnapshot(`
+ "
+
+ contextual error:
+ Kaboom!
+
+
Not I!
}>
+ {
+ throw new Error("Kaboom!");
+ }}
+ errorElement={Not I!
}
+ />
+
+ ),
+ {
+ initialEntries: ["/child"],
+ hydrationData: { loaderData: { "0": null } },
+ }
+ );
+ let { container } = render(
+ fetcher.submit(
+ { key: "value" },
+ { method: "post", action: "/fetch" }
+ )
+ }
+ >
+ submit
+
+ );
+ }
+
+ function ErrorElement() {
+ let error = useRouteError() as Error;
+ return contextual error:{error.message}
;
+ }
+
+ expect(getHtml(container)).toMatchInlineSnapshot(`
+ "
+
+ submit
+
+
"
+ `);
+
+ fireEvent.click(screen.getByText("submit"));
+ await waitFor(() => screen.getByText(/Kaboom!/));
+ expect(getHtml(container)).toMatchInlineSnapshot(`
+ "
+
+ contextual error:
+ Kaboom!
+
+
`count=${++count}`}
- element={
- ),
- {
- initialEntries: ["/foo"],
- hydrationData: {
- loaderData: {
- "0-0": "count=1",
+ it("useFetcher is stable across across location changes", async () => {
+ let router = createMemoryRouter(
+ [
+ {
+ path: "/",
+ Component() {
+ let [count, setCount] = React.useState(0);
+ let location = useLocation();
+ let navigate = useNavigate();
+ let fetcher = useFetcher();
+ let fetcherCount = React.useRef(0);
+ React.useEffect(() => {
+ fetcherCount.current++;
+ }, [fetcher.submit]);
+ return (
+ <>
+ {
+ setCount(count + 1);
+ let random = Math.random().toString();
+ navigate(`${location.pathname}?random=${random}`);
+ }}
+ >
+ Click
+
+
+ {`render count:${count}`}
+ {`fetcher count:${fetcherCount.current}`}
+
+
+ );
+ },
},
- },
- }
- );
- let { container } = render(
-
revalidate()}>Revalidate
-
{navigation.state}
-
{state}
-
-
{data}
;
- }
- expect(getHtml(container)).toMatchInlineSnapshot(`
- "
-
-
- Revalidate
-
-
- idle
-
-
- idle
-
-
- count=1
-
-
-
-
-
- Revalidate
-
-
- idle
-
-
- loading
-
-
- count=1
-
-
-
-
-
- Revalidate
-
-
- idle
-
-
- idle
-
-
- count=2
-
-
-
-
- ),
- {
- initialEntries: ["/deep/path/to/descendant/routes"],
- }
- );
- let { container } = render(
-
- 👋 Hello from the other side!}
- />
-
-
+ it("allows direct loaders to be passed to fetcher.load()", async () => {
+ let router = createMemoryRouter(
+ [
+ {
+ path: "/",
+ Component() {
+ let fetcher = useFetcher();
+ return (
+ <>
+ fetcher.load(() => "LOADER")}>
+ Load
+
+ {fetcher.data || "empty"}
+
+ );
+ },
+ },
+ ],
+ {}
);
- }
+ let { container } = render(
-
- );
- }
+ expect(getHtml(container)).toMatch("empty");
- expect(getHtml(container)).toMatchInlineSnapshot(`
- "
-
- 👋 Hello from the other side!
-
- "
- `);
- });
+ fireEvent.click(screen.getByText("Load"));
+ await waitFor(() => screen.getByText("LOADER"));
+ expect(getHtml(container)).toMatch("LOADER");
+ });
- it("renders alongside a data router ErrorBoundary", () => {
- let router = createMemoryRouter(
- [
+ it("allows direct loaders to override the fetch route loader", async () => {
+ let router = createMemoryRouter(
+ [
+ {
+ path: "/",
+ loader: () => "LOADER ROUTE",
+ Component() {
+ let fetcher = useFetcher();
+ return (
+ <>
+ fetcher.load(".")}>Load Route
+ fetcher.load(() => "LOADER OVERRIDE")}>
+ Load Override
+
+ {fetcher.data || "empty"}
+
+ );
+ },
+ },
+ ],
{
- path: "*",
- Component() {
- return (
- <>
-
- Descendant} />
-
-
- );
+ hydrationData: { loaderData: { "0": null } },
+ }
+ );
+ let { container } = render(
+ fetcher.submit(new FormData(), {
+ method: "post",
+ action: () => "ACTION",
+ })
+ }
+ >
+ Submit
+
+ {fetcher.data || "empty"}
+
+ );
+ },
},
- children: [
- {
- id: "index",
- index: true,
- Component: () => Child ,
- ErrorBoundary() {
- return {(useRouteError() as Error).message}
;
- },
+ ],
+ {}
+ );
+ let { container } = render(
+ fetcher.submit(new FormData(), {
+ method: "post",
+ })
+ }
+ >
+ Submit Route
+
+
+ fetcher.submit(new FormData(), {
+ method: "post",
+ action: () => "ACTION OVERRIDE",
+ })
+ }
+ >
+ Submit Override
+
+ {fetcher.data || "empty"}
+
+ );
},
- ],
- },
- ],
- {
- initialEntries: ["/"],
- hydrationData: {
- errors: {
- index: new Error("Broken!"),
},
- },
- }
- );
- let { container } = render(
-
- Broken!
-
-
- Descendant
-
-
"FETCH"} />
+
+ ),
+ {
+ basename: "/base",
+ initialEntries: ["/base"],
+ }
+ );
+ let { container } = render({`data:${fetcher.data}`}
+ fetcher.load("/fetch")}>load
+
+ );
+ }
+
+ expect(getHtml(container)).toMatchInlineSnapshot(`
+ "
+
+ data:undefined
+
+
+ load
+
+
+
+ data:FETCH
+
+
+ load
+
+
"FETCH"} />
+
+ ),
+ {
+ basename: "/base",
+ initialEntries: ["/base"],
+ }
+ );
+ let { container } = render({`data:${fetcher.data}`}
+
+ fetcher.submit({}, { method: "get", action: "/fetch" })
+ }
+ >
+ load
+
+
+ );
+ }
+
+ expect(getHtml(container)).toMatchInlineSnapshot(`
+ "
+
+ data:undefined
+
+
+ load
+
+
+
+ data:FETCH
+
+
+ load
+
+
"FETCH"} />
+
+ ),
+ {
+ basename: "/base",
+ initialEntries: ["/base"],
+ }
+ );
+ let { container } = render({`data:${fetcher.data}`}
+
+ fetcher.submit({}, { method: "post", action: "/fetch" })
+ }
+ >
+ submit
+
+
+ );
+ }
+
+ expect(getHtml(container)).toMatchInlineSnapshot(`
+ "
+
+ data:undefined
+
+
+ submit
+
+
+
+ data:FETCH
+
+
+ submit
+
+
;
children: React.ReactNode;
}) {
let dataRouterContext = React.useContext(DataRouterContext);
@@ -3387,13 +5380,23 @@ function MemoryNavigate({
let onClickHandler = React.useCallback(
async (event: React.MouseEvent) => {
event.preventDefault();
- if (formMethod && formData) {
- dataRouterContext?.router.navigate(to, { formMethod, formData });
+ if (formMethod) {
+ if (formData) {
+ dataRouterContext?.router.navigate(to, {
+ formMethod,
+ formData,
+ });
+ } else {
+ dataRouterContext?.router.navigate(to, {
+ formMethod,
+ payload,
+ });
+ }
} else {
dataRouterContext?.router.navigate(to);
}
},
- [dataRouterContext, to, formMethod, formData]
+ [dataRouterContext, to, formMethod, formData, payload]
);
// Only prepend the basename to the rendered href, send the non-prefixed `to`
@@ -3404,7 +5407,7 @@ function MemoryNavigate({
href = to === "/" ? basename : joinPaths([basename, to]);
}
- return formData ? (
+ return formData || payload ? (
) : (
| null;
+
+/**
+ * Submits a payload to an action without reloading the page.
+ */
+export interface SubmitFunction {
+ (
+ /**
+ * Data to be submitted to the action
+ */
+ payload: SubmitPayload,
+
+ /**
+ * Options that override the default submission behavior
+ */
+ options?: SubmitOptions
+ ): void;
+}
+
+export interface SubmitOptions {
+ /**
+ * The HTTP method used to submit. Defaults to "GET".
+ */
+ method?: HTMLFormMethod;
+
+ /**
+ * The action URL path used to submit the form, or the action function to
+ * execute. Defaults to the path of the current route.
+ */
+ action?: string | ActionFunction;
+
+ /**
+ * Optional encType to be used to encode the submission into the action `request`
+ */
+ encType?: FormEncType | null;
+
+ /**
+ * Set `true` to replace the current entry in the history stack instead of
+ * creating a new one (i.e. stay on "the same page"). Defaults to `false`.
+ */
+ replace?: boolean;
+
+ /**
+ * Determines whether the action is relative to the route hierarchy or
+ * the pathname. Use this if you want to opt out of navigating the route
+ * hierarchy and want to instead route based on /-delimited URL segments
+ */
+ relative?: RelativeRoutingType;
+}
+
+/**
+ * Returns a function that may be used to programmatically submit some
+ * arbitrary data to the server.
+ */
+export function useSubmit(): SubmitFunction {
+ return useSubmitImpl();
+}
+
+function useSubmitImpl(
+ fetcherKey?: string,
+ fetcherRouteId?: string
+): SubmitFunction {
+ let { router } = useDataRouterContext(DataRouterHook.UseSubmitImpl);
+ let currentRouteId = useRouteId();
+
+ return React.useCallback(
+ (payload, options = {}) => {
+ let path =
+ typeof options.action === "function" ? null : options.action || null;
+ let routerAction =
+ typeof options.action === "function" ? options.action : undefined;
+
+ // Base options shared between fetch() and navigate()
+ let opts = {
+ payload,
+ formMethod: options.method || "get",
+ formEncType: options.encType,
+ action: routerAction,
+ };
+
+ if (fetcherKey) {
+ invariant(
+ fetcherRouteId != null,
+ "No routeId available for useFetcher()"
+ );
+ router.fetch(fetcherKey, fetcherRouteId, path, opts);
+ } else {
+ router.navigate(path, {
+ ...opts,
+ replace: options.replace,
+ fromRouteId: currentRouteId,
+ });
+ }
+ },
+ [router, fetcherKey, fetcherRouteId, currentRouteId]
+ );
+}
+
+let fetcherId = 0;
+
+export type FetcherWithMethods = Fetcher & {
+ submit: (
+ target: SubmitPayload,
+ // Fetchers cannot replace/preventScrollReset because they are not
+ // navigation events
+ options?: Omit
+ ) => void;
+ load: (href: string | LoaderFunction) => void;
+};
+
+/**
+ * Interacts with route loaders and actions without causing a navigation. Great
+ * for any interaction that stays on the same page.
+ */
+export function useFetcher(): FetcherWithMethods {
+ let { router } = useDataRouterContext(DataRouterHook.UseFetcher);
+
+ let route = React.useContext(RouteContext);
+ invariant(route, `useFetcher must be used inside a RouteContext`);
+
+ let routeId = route.matches[route.matches.length - 1]?.route.id;
+ invariant(
+ routeId != null,
+ `useFetcher can only be used on routes that contain a unique "id"`
+ );
+
+ let [fetcherKey] = React.useState(() => String(++fetcherId));
+ let [load] = React.useState(() => (href: string | LoaderFunction) => {
+ invariant(router, "No router available for fetcher.load()");
+ invariant(routeId, "No routeId available for fetcher.load()");
+ if (typeof href === "function") {
+ router.fetch(fetcherKey, routeId, null, { loader: href });
+ } else {
+ router.fetch(fetcherKey, routeId, href);
+ }
+ });
+ let submit = useSubmitImpl(fetcherKey, routeId);
+
+ let fetcher = router.getFetcher(fetcherKey);
+
+ let fetcherWithMethods = React.useMemo(
+ () => ({
+ submit,
+ load,
+ ...fetcher,
+ }),
+ [fetcher, submit, load]
+ );
+
+ React.useEffect(() => {
+ // Is this busted when the React team gets real weird and calls effects
+ // twice on mount? We really just need to garbage collect here when this
+ // fetcher is no longer around.
+ return () => {
+ if (!router) {
+ console.warn(`No router available to clean up from useFetcher()`);
+ return;
+ }
+ router.deleteFetcher(fetcherKey);
+ };
+ }, [router, fetcherKey]);
+
+ return fetcherWithMethods;
+}
+
+/**
+ * Provides all fetchers currently on the page. Useful for layouts and parent
+ * routes that need to provide pending/optimistic UI regarding the fetch.
+ */
+export function useFetchers(): Fetcher[] {
+ let state = useDataRouterState(DataRouterStateHook.UseFetchers);
+ return [...state.fetchers.values()];
+}
+
const alreadyWarned: Record = {};
function warningOnce(key: string, cond: boolean, message: string) {
diff --git a/packages/router/__tests__/router-test.ts b/packages/router/__tests__/router-test.ts
index 19f53849ef..ba90a230e0 100644
--- a/packages/router/__tests__/router-test.ts
+++ b/packages/router/__tests__/router-test.ts
@@ -9838,6 +9838,53 @@ describe("a router", () => {
});
});
+ it("updates router state with fetchers after action-driven revalidations", async () => {
+ let t = setup({
+ routes: TASK_ROUTES,
+ initialEntries: ["/"],
+ hydrationData: { loaderData: { root: "ROOT", index: "INDEX" } },
+ });
+
+ let key = "key";
+ let A = await t.fetch("/tasks/1", key);
+ await A.loaders.tasksId.resolve("TASKS 1");
+ expect(A.fetcher.state).toBe("idle");
+ expect(A.fetcher.data).toBe("TASKS 1");
+
+ let C = await t.navigate("/tasks", {
+ formMethod: "post",
+ formData: createFormData({}),
+ });
+ // Add a helper for the fetcher that will be revalidating
+ t.shimHelper(C.loaders, "navigation", "loader", "tasksId");
+
+ // Resolve the action
+ await C.actions.tasks.resolve("TASKS ACTION");
+
+ // Fetcher should go back into a loading state
+ expect(t.router.state.fetchers.get(key)?.state).toBe("loading");
+
+ let currentFetchers = t.router.state.fetchers;
+ let newFetchersInstance = false;
+ let unsub = t.router.subscribe((s) => {
+ if (currentFetchers !== s.fetchers) {
+ newFetchersInstance = true;
+ }
+ });
+
+ // Resolve navigation loaders + fetcher loader
+ await C.loaders.root.resolve("ROOT*");
+ await C.loaders.tasks.resolve("TASKS LOADER");
+ await C.loaders.tasksId.resolve("TASKS ID*");
+ expect(t.router.state.fetchers.get(key)).toMatchObject({
+ state: "idle",
+ data: "TASKS ID*",
+ });
+
+ expect(newFetchersInstance).toBe(true);
+ unsub();
+ });
+
it("revalidates fetchers on action redirects", async () => {
let t = setup({
routes: TASK_ROUTES,
diff --git a/packages/router/router.ts b/packages/router/router.ts
index 8a124b7c1e..a63866d16c 100644
--- a/packages/router/router.ts
+++ b/packages/router/router.ts
@@ -610,6 +610,10 @@ interface HandleLoadersResult extends ShortCircuitable {
* errors thrown from the current set of loaders
*/
errors?: RouterState["errors"];
+ /**
+ * fetchers updates via revalidation
+ */
+ fetchers?: RouterState["fetchers"];
}
/**
@@ -1335,7 +1339,7 @@ export function createRouter(init: RouterInit): Router {
}
// Call loaders
- let { shortCircuited, loaderData, errors } = await handleLoaders(
+ let { shortCircuited, loaderData, errors, fetchers } = await handleLoaders(
request,
location,
matches,
@@ -1361,6 +1365,7 @@ export function createRouter(init: RouterInit): Router {
...(pendingActionData ? { actionData: pendingActionData } : {}),
loaderData,
errors,
+ ...(fetchers ? { fetchers } : {}),
});
}