Is there any hope for Promise based networking with useSubmit / useFetcher?

[iway1]

Remix doesn't have any straightforward way to run some code after a successful request is sent with useSubmit or useFetcher. It feels extremely clunky in certain situations. For example, if I want to show a toast to the user imperatively (which is the easiest way to show toasts), then I have to do something like this:

function Component() {
    const fetcher = useFetcher();

    useEffect(()=>{
        if(fetcher.data) toast.show('Success!')
    }, [fetcher.data])

    return (
        <div>
            <button onClick={()=>fetcher.submit()}>fetch</button>
        </div>
    )
}

Am I the only one that think this just really, really sucks?

it's really easy to mess up and show the toast multiple times, and it's way clunkier than having .submit() be a promise that we can just .then. This would be so much easier and less error prone:

fetcher.submit().then(()=>toast.show('good'));

Pretty much every other javascript interface in existence that allows sending data is promise based. I understand remix wants to do things differently and encourage good practices, but .then seems to be much better for these types of situations.

I really can't think of a good reason to make it this difficult to just run some code after a successful request.

[lili21]

I agree.
and fetcher.load throw the error to ErrorBoundary is also weird.
I'm only using fetch.load for non-critical resource, and it shouldn't break the ui even it throw error.

[lili21]

same for the submission error. it should't break the entire page right?
and for the submission feedback, it not that straight to do it in remix.

[krall12]

I'd also like a solution to this. As far as I can tell there isn't even a way to know if an action error'd except sending down an error message from the action. But even then, because there's no way to reset a fetcher, the error data will always exist. Is there any good solutions around this?

[kiliman]

There is nothing preventing you from using native fetch for these use cases, or wrapping useFetcher in custom hooks.

[krall12]

Auth tokens are hashed and only readable server side. I'd like to hold off having to expose that browser side for as long as I can if possible.

I think an ideal scenario would be a useFetcher that gets extended with an actual status of 'idle' | 'pending' | 'success' | 'error' (or just some way to do fetcher.reset()).

Here's my first pass at a useFetcher wrapper. I think the biggest weakness is not being able to tell if an error occurred without sending down a specific key that the hook picks up on, in this case error.

const useBetterFetcher = () => {
  const fetcher = useFetcher();

  const status: 'idle' | 'pending' | 'success' | 'error' = useMemo(() => {
    if (fetcher.state === 'idle' && !fetcher.data) {
      return 'idle';
    } else if (fetcher.state === 'loading') {
      return 'pending';
    } else if (fetcher.state === 'submitting') {
      return 'pending';
    } else if (fetcher.data && typeof fetcher.data === 'object' && 'error' in fetcher.data) {
      return 'error';
    } else {
      return 'success';
    }
  }, [fetcher.data, fetcher.state]);

  return { ...fetcher, status };
};

[juniorforlife]

Definitely need this feature @ryanflorence. Without promise support it's very annoying and buggy to implement infinite scrolling. The reason being you have to rely on fetcher.data like this:

// once end of page reached, call `fetcher.load(`../offset=newOffset`);`
useEffect(() => {
    if (fetcher.data) {
      setData((prevState) => [...prevState, ...fetcher.data]);
    }
}, [fetcher.data]);

If some other state changes then the above effect will run again because fetcher.data is a new object every render
This will result in duplicated data because fetcher.data is not cleared/reset

With promise supported, we can simply do fetcher.load(...).then(data => setData((prevState) => [...prevState, ...data]))
Also it's worth notice that the example of infinite scrolling suggested the above approach which is buggy

[juniorforlife]

sorry to tag you directly but I'd like to hear your thoughts since this is requested by many @sergiodxa @kiliman

[kiliman]

Here's a useSubmitPromise hook. You can do something similar for useFetcher.

https://gist.github.com/kiliman/c900df084ea7dd306e0cb85b81848fbb

[juniorforlife]

thanks for the quick reply. Hopefully this will be baked in to the framework soon 🙏

[cliffordfajardo]

Note the code was created a few months ago & may require some small tweaks

@iway1 @krall12 @juniorforlife - I created 2 lightweight hooks over useSubmit and useFetcher that look like this:
Stackblitz example: https://stackblitz.com/edit/node-s1xxwy?file=package.json,app%2Froutes%2Findex.tsx

const {submit, ...} = useRemixFetcher({
  onSuccess(){ /*show toast or notification*/}, 
  onError(){..}
})

const {submit, ...} = useRemixSubmit({
  onSuccess(){ /*show toast or notification*/},   
  onError(){..}
})

You can subscribe to this Remix Discussion proposal to get updates or give feedback in the link below:
remix-run/react-router#10013

[josevitormorais]

Hello Remixers, I'll leave my strategy here, in case anyone runs into this "problem". Following the tip that @kiliman left us here https://gist.github.com/kiliman/c900df084ea7dd306e0cb85b81848fbb (thanks @kiliman for this snippet 💯 )
I adapted it for my use case like this, and it's working:

this an hook:

import { Fetcher } from "@remix-run/react";
import { useEffect, useRef } from "react";


export const useToastSubmitPromise = (initialState: Fetcher<any>) => {
    const promisefy = useRef(deferred());
    
    useEffect(() => {
        if (initialState.state === "idle" && initialState.data && initialState.data.success) {
            promisefy.current.resolve();
            promisefy.current = deferred(); // reset promise state for pending.
        }

        if (initialState.data && !initialState.data.success) promisefy.current.reject();

    }, [initialState.state, initialState.data]);

    return promisefy.current.promise
}

function deferred() {
    let resolve: any;
    let reject: any;
    const promise = new Promise((res, rej) => {
        resolve = res;
        reject = rej;
    });

    return { resolve, reject, promise };
}

where its use can be like this:

  const submit = useToastSubmitPromise(fetcher);

  useEffect(() => {
    if (fetcher.state === "idle") return;

    toast.promise(submit,
      {
        pending: 'Salvado dados, por favor aguarde...',
        success: 'Dados salvos com sucesso.',
        error: 'Ops, ocorreu um erro, tente novamente.',

      },
      { toastId: 'submit_data' }
    );

  }, [fetcher.state])

[gustavopch]

Haven't tested yet, but I guess now we can achieve that with client actions. For example:

export async function clientAction({
  serverAction,
}: ClientActionFunctionArgs) => {
  const data = await serverAction()
  toast.show('Success!')
  return data
}

[kiliman]

I agree. Remix provides just the right extension points which make for great DX and UX.

[ejscheepers]

Can someone please help me with this:

 try {
      fetcher.submit(formData, { method: "POST", action: postActionUrl });
      
      setDialogOpen(false);

      //TODO: Only close dialog once the operation is finished.

      toast({
        title: "Contract Generation Successful",
        description: "Please get contracts signed asap!",
      });
    } catch (error) {
      // Handle the error if needed
      console.error("Error generating contracts:", error);
    }

I want my toast only to display after fetcher.submit is successful, but I am not following what to do from your comments?

Thanks for any help!

[lili21]

@ejscheepers

useEffect(() => {
  // fetcher.data is the value return from action, you can toast base on the value
  if (fetcher.data.success) {
    toast()
  }
}, [fetcher.data])

[ejscheepers]

Thank you very much this worked! For anyone who needs more clarity, below is what the action looks like:

export async function action({ request }: ActionFunctionArgs) {

  const formData = await request.formData();
  
  const { error } = await SomeFunction({
   argument
  });

  if (error) {
    console.log("Error occured ", error);

    return json({ success: false, error: "Failed to request" }, { status: 500, headers });
  }
  return json({ success: true, error: null }, { headers });
}

[mephju]

Woooow this cool, That's why I love remix!!!!! @gustavopch thanks for it. I didn't know about this function yet!!

this very simple:

export const clientAction = async ({
  request,
  params,
  serverAction,
}: ClientActionFunctionArgs) => {
  let promiseData = serverAction();
  
  toast.promise(promiseData,
    {
      pending: 'Salvado os dados, por favor aguarde...',
      success: 'Dados salvos com sucesso.',
      error: 'Ops, ocorreu um erro, tente novamente.',

    },
    { toastId: 'submit_data', theme: 'dark' }
  );

  return await promiseData;
};

But it's not that good. You can't even run hooks and lots of toaster impls require you to run a hook to acquire the toast function.

[tmcw]

This is my biggest gripe with Remix after using it for a little over a year. Everything having to do with reacting to form submission results, whether it's "close this form after the form submits" or "show a toast" requires me to think hard about this problem that is fairly well-understood in other systems.

Maybe what's provided is just enough to implement custom hooks on top, but to me it feels too vague and isn't very well documented either - the docs don't give many hints, there's no guide for this case, and as this thread and others suggest, a lot of people aren't getting it.

[mephju]

It's like Remix does really not want you to implement things like that. And maybe they don't want us to develop too many JS-only functionalities. But personally I really don't care about any users that don't even activate JS in their browsers.

[jrestall]

Maybe this roadmap item will help? https://github.com/orgs/remix-run/projects/5?pane=issue&itemId=62177552

[mephju]

@jrestall It would be an improvement but I can't see what these promises resolve with.

[arunmmanoharan]

`
import type { FetcherWithComponents } from "@remix-run/react";
import { useFetcher } from "@remix-run/react";
import { useEffect, useState } from "react";
import type { AppData } from "@remix-run/react/dist/data";
import type { SerializeFrom } from "@remix-run/server-runtime";
import { resetFetcher } from "/utils/resetFetcher";
import { generateRandomString } from "/src/utils";

/**
 * A higher-order function that creates a new FetcherWithComponentsPromise instance,
 * which extends the FetcherWithComponents interface.
 * The new instance includes an additional method `reset` that can be used to reset the state of the fetcher.
 *
 * @template T - The type of data returned by the fetcher.
 * @param fetcherWithComponents - The FetcherWithComponents instance to be extended.
 * @returns A new FetcherWithComponentsPromise instance.
 */
export type FetcherWithComponentsPromise<T> = FetcherWithComponents<T> & {
  reset: () => void;
  loadAsync: (href: string) => Promise<T>;
};

/**
 * Custom hook that wraps the useFetcher hook with the ability to reset data.
 *
 * @param {Object} opts - Optional options to pass to the useFetcher hook.
 * @returns {Object} - An object containing fetcher properties with added reset functionality.
 */
export function useFetcherWithPromise<T = AppData>(
  opts?: Parameters<typeof useFetcher>[0],
): FetcherWithComponentsPromise<SerializeFrom<T>> {
  const [key, setKey] = useState(generateRandomString());
  const fetcher = useFetcher<T>({ ...opts, key: `${opts?.key}-${key}` });
  const [data, setData] = useState<SerializeFrom<T> | undefined>(fetcher.data);
  const [loadingPromise, setLoadingPromise] = useState<{
    resolve: (value: SerializeFrom<T>) => void;
    reject: (reason?: any) => void;
  } | null>(null);

  useEffect(() => {
    if (fetcher.state === "idle" && loadingPromise) {
      if (fetcher.data) {
        setData(fetcher.data);
        loadingPromise.resolve(fetcher.data as SerializeFrom<T>);
      } else {
        loadingPromise.reject(new Error("Failed to load data"));
      }
      setLoadingPromise(null);
    }
  }, [fetcher.state, fetcher.data, loadingPromise]);

  const loadAsync = (href: string) => {
    fetcher.load(href);
    return new Promise<SerializeFrom<T>>((resolve, reject) => {
      setLoadingPromise({ resolve, reject });
    });
  };

  return {
    ...fetcher,
    data: data as SerializeFrom<T>,
    loadAsync,
    reset: () => {
      setKey(generateRandomString());
      setData(undefined);
      resetFetcher(fetcher);
    },
  };
}

`

This is a variant I use

[paul-vd]

Looks like we will finally see this long awaited feature: https://github.com/orgs/remix-run/projects/5?pane=issue&itemId=62177552 🙏