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
}

[josevitormorais]

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;
};

[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 });
}

[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.

[ian-rafael]

I think an API like this would do the job

const fetcher = useFetcher({
  onIdle: ({data, ...args}) => {},
})