#Resetting useFetcher

1 messages · Page 1 of 1 (latest)

tribal fractal
#

Is there a way to "reset" a useFetcher? I have a breadcrumb and the last one can be renamed inline. If I fetcher.submit the change and get a response back it puts the fetcher in the done state (firing the success toast). But now I can't use that done state again if I wanted to re-rename it because there's no way to get it out of the done state. Is there a way around this or am I thinking about fetchers wrong?

sweet sparrow
#

there's no fetcher.reset()

#

you can re-mount the component which will re-create the fetcher

tribal fractal
#

got it, thanks.

unique aurora
sweet sparrow
#

every time it was requested there was a better way to solve it in the past, if you find a use case try to write a proposal in the repo and show your use case and try to convince Ryan

tribal fractal
#

Do you have any idea what "the better way" is?

#

I'll write something up for a discussion this weekend. If there is a better way I'm not thinking of then maybe documenting the better way could be the solution

livid fox
#

I just fetch to an action that instantly returns null and the fetcher is cleared.

tribal fractal
#

That would make the fetcher.data null, but not the fetcher.state

sweet sparrow
#

the usual solution is to re-mount the component with the fetcher

#

for example, if you use a fetcher to get the data for a modal, put the useFetcher inside the modal an mount it to open it, that way when you close it it will unmount and when you open it again it will start with a new fetcher

tribal fractal
#

Seems like a limiting factor. Its probably okay for a lot of scenarios, but not all. There'd be no way for things outside the modal to react to the status of the fetcher.

sweet sparrow
#

I truly recommend you to open a proposal and mention as many use cases as possible, that's the best way to get the team to think about that

civic ledge
#

Hey @sweet sparrow
Below is my useFetcher
cosnt [key, setKey] = useState<string>("")
const addNewResolutionFetcher = useFetcher<
| ICreateNewFilterDialogState
| { errors: Record<string, string>; formValues: NewResolution }

({
key: addNewResolution-${filterData?.id}-${key},
});
This is how i am setting a new key so the useFetcher would get reset.
useEffect(() => {
if (
addNewResolutionFetcher.state === "idle" &&
addNewResolutionFetcher.data &&
!("errors" in addNewResolutionFetcher.data)
) {
toast(Resolution successfully ${isEdit ? "edited" : "added"}, {
type: "success",
});
setState(initialState);
setKey(generateRandomString());
onClose();
}
},
[addNewResolutionFetcher.state, addNewResolutionFetcher.data, isEdit],
);
But its still has the data even after setting it up with the new key

grim dust
# 
export type FetcherWithComponentsReset<T> = FetcherWithComponents<T> & {
    reset: () => void;
}

export function useFetcherWithReset<T>(): FetcherWithComponentsReset<SerializeFrom<T>> {
    const fetcher = useFetcher<T>();
    const [data, setData] = useState(fetcher.data);
    useEffect(() => {
        if (fetcher.state === "idle") {
            setData(fetcher.data);
        }
    }, [fetcher.state, fetcher.data]);
    return {
        ...fetcher,
        data: data as SerializeFrom<T> | undefined,
        reset: () => setData(undefined),
    }
}
#

Thats what I use and it works flawlessly!

civic ledge
#

Hi @grim dust i have same function which shows me that undefined when i console log addNewResolutionFetcher.data. The above method which you have suggested used to work fine. For some reason it not working anymore. So i though to find a new way to reset the fetcher. Any idea ?