Next.js Discord

Discord Forum

Save popup cancel functionality

Answered
Siamese posted this in #help-forum
Open in Discord
SiameseOP
Hi, on page load I fetch data using useEffect. Is there an easy way to re execute the function so that the cancel button also returns the data to original state?
Answered by averydelusionalperson
and fetch it by default in useEffect, and again fetch it onclick of cancel button
View full answer

33 Replies

SiameseOP
router.refresh() doesn't refresh the useStates sadly
example fetch I do:

useEffect(() => {
    const controller = new AbortController();

    axios.get(`api url`, {signal: controller.signal})
    .then(function (response: any) {
      if (response) {
        <use the response to change useStates>
      }
    }).catch(error => {
      <handle errors>
    }).finally(() => {
      if (!controller.signal.aborted) setLoading(false);
    });

    return () => controller.abort();
  }, [guildID]);
@Siamese Hi, on page load I fetch data using useEffect. Is there an easy way to re execute the function so that the cancel button also returns the data to original state?
ᴉuɐpɹɐɐ
maybe check out AbortController on how you can cancel the fetch when cancel button is clicked. This way if the fetch didnt return, the state will not get changed
so that it returns to original aka the one from database
SiameseOP
can i trigger the useEffect by maybe adding some varaible to the array?
like a boolean i would set to true when cancel button gets clicked
or just some random value
like a number
averydelusionalperson
no, you should have fetcher function seperately
@averydelusionalperson no, you should have fetcher function seperately
averydelusionalperson
and fetch it by default in useEffect, and again fetch it onclick of cancel button
Answer
SiameseOP
can i refresh the site? I have some parts I can't rly have as a function
averydelusionalperson
well, if you want you can. I don't think it would be good UX tho
SiameseOP
beacuse I have some data i fetch inside layout file which i later set to the context
I could pass the fetch function in a context, but I dont think the context data would update
averydelusionalperson
well, I personally would write code such as that I won't need to refresh
SiameseOP
const [data, setData] = useState({bot: undefined, db: undefined});

useEffect(() => {
        const controller = new AbortController();

        fetch here

        return () => controller.abort();
    }, [guildID]);

    return (
        <RouteChangesProvider>
            <DashContextProvider guild={data}>
                <Navbar />
                <div className="flex flex-row font-semibold w-full dashboard w-screen overflow-hidden"> 
                    <Sidebar/>
                    <main className={`${styles.childrenHeight} w-full overflow-y-scroll overflow-x-hidden`}>
                        {children}
                    </main>
                </div>
            </DashContextProvider>
        </RouteChangesProvider>
    )
averydelusionalperson
or atleast when I'm using client components
averydelusionalperson
I think so? you are passing data to the dashboard provider
BTW, are you using next.js?
SiameseOP
yeah
export const DashContextProvider: React.FC<MyContextProviderProps> = ({ children, guild, guilds, notifications }) => {
  return <MyContext.Provider value={{ guild, guilds, notifications }}>{children}</MyContext.Provider>;
};
So I should be able to pass the fetch function in context and it should work fine?
wouldn't it loose access to that useState from before, would also need to pass it ig
averydelusionalperson
you can have setState as params in the fetcher function
SiameseOP
yeah true
still need to pass it
so that when i need to run the function I have the setData function too
averydelusionalperson
yeah, ig so. personally this feels cluttered
SiameseOP
got it to work
joulev
please mark the solution to this thread