Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Toast not working properly #13

Open
yarapolana opened this issue Mar 14, 2024 · 10 comments
Open

Toast not working properly #13

yarapolana opened this issue Mar 14, 2024 · 10 comments

Comments

@yarapolana
Copy link

yarapolana commented Mar 14, 2024 •
edited
Loading

Hi I followed the initial steps to get the toast going with sonner see below, but it is not working.
Expected behaviour:
Toast to work when being called.

What is happening:
Toast gets called on refresh twice, and doesn't get cleared, if I refresh it continues to get called.

Is something else missing?

from route

// ... imports

export const action = async ({ request }: ActionFunctionArgs) => {
  return jsonWithError(null, 'There are errors in the form')
}

from root

// ... imports

export const loader = async ({ request }: LoaderFunctionArgs) => {
  // ... otherHeaders logic
  const { toast, headers: toastHeaders } = await getToast(request)

  return json(
    {
      toast
    },
    {
      headers: {
        // ...otherHeaders,
        ...toastHeaders
      }
    }
  )
}

export default function Home() {
  const { toast: serverToast } = useLoaderData<typeof loader>()

  useEffect(() => {
    console.log('serverToast', serverToast)

    if (serverToast?.type === 'success') {
      toast.success(serverToast.message)
    }
    if (serverToast?.type === 'error') {
      toast.error(serverToast.message)
    }
  }, [serverToast])
  
  return (
    <html lang="en">
      <head>
        <Meta />
        <title>Basic Example With Remix Toast</title>
        <Links />
      </head>
      <body>
        {children}
        <Toaster />
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  )
}

using

devDeps
@remix-run/dev -> 2.8.1
@remix-run/eslint-config -> 2.8.1

deps
@remix-run/serve -> 2.8.1
@remix-run/react -> 2.8.1
@remix-run/node -> 2.8.1
sonner -> 1.4.0

Edit: Just wanted to say congrats with the lib though, fantastic explanation on the blog.
@AlemTuzlak
Copy link
Contributor

Hi @yarapolana , thank you so much!

I think the issue has something to do with the fact that you're spreading the toastHeaders like that, headers are not normal JS objects so they don't really act the same, what happens if you return headers: toastHeaders?

@yarapolana
Copy link
Author

@AlemTuzlak You are welcome
I tried and have the same result, only appears after refresh.
I have other headers for auth cookie thats why I had to spread them otherwise auth wouldn't work.

not working

    {
      headers: toastHeaders
    }

@kianweelee
Copy link
Contributor

Hi @yarapolana, I am facing the same issue as well with multiple headers. Do you have a solution for this yet?

@AlemTuzlak
Copy link
Contributor

Do you guys mind creating a minimum repro so I can check it out

@AlemTuzlak
Copy link
Contributor

also would you mind trying using this:

export function combineHeaders(...headers: Array<ResponseInit["headers"] | null | undefined>) {
  const combined = new Headers();
  for (const header of headers) {
    if (!header) {
      continue;
    }
    for (const [key, value] of new Headers(header).entries()) {
      combined.append(key, value);
    }
  }
  return combined;
}

headers: combineHeaders(toastHeaders,otherHeaders)

@yarapolana
Copy link
Author

@AlemTuzlak I found out what my issue was.

On the root.tsx file I am using export const shouldRevalidate = () => false
if I comment out this line everything works, I used Object.assign, tried combinedHeaders and it also works but only with the line commented out.

Now how can I still use shouldRevalidate and the toast?

@GoodluckH
Copy link

Same issue here. Using the latest Remix without shouldRevalidate in the root. Works in dev but has the issue when deployed to production.

@wonesy
Copy link

wonesy commented May 17, 2024 •
edited
Loading

I am also seeing this issue. Always appears twice on refresh and is never evicted from the cookie.

I am also using cookie-based auth, which i am checking prior to getting to this toast stage, so perhaps the issue lies therein

@grundmanise
Copy link

Might be related to remix-run/remix#5647 (comment)

@AlemTuzlak
Copy link
Contributor

@grundmanise This might be the actual cause of it but that might be solved when single fetch is released and the API is changed. Unfortunately I can't do much to help without a reliable repro to help figure it out, but if it's caused by a race-condition in Remix there's really not much I could do. I believe you guys are having an issue but I have no idea how to solve it unfortunately 😢

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@wonesy @AlemTuzlak @grundmanise @yarapolana @GoodluckH @kianweelee