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.

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

Random fetchers trigger the POST /action/set-theme #45

Open
MarkusTrb opened this issue Nov 6, 2024 · 0 comments
Open

Random fetchers trigger the POST /action/set-theme #45

MarkusTrb opened this issue Nov 6, 2024 · 0 comments

Comments

@MarkusTrb
Copy link

MarkusTrb commented Nov 6, 2024

Describe the bug

I've come across an unexpected behaviour where every fetcher.submit call in my Remix application also causes a POST /action/set-theme request to happen. Is this intended behaviour?

Your Example Website or App

n/a

Steps to Reproduce the Bug or Issue

Root code:

import { withSentry } from "@sentry/remix";
import { ThemeProvider, useTheme, PreventFlashOnWrongTheme } from "remix-themes";
import { json } from "@remix-run/node";
import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from "@remix-run/react";
import { themeSessionResolver } from "./session.server";
import { AppProvider } from "./context/app-provider";
import { ReaderProvider } from "./context/reader-provider";

export async function loader({ request }) {
  const { getTheme } = await themeSessionResolver(request);

  return json({
    userTheme: getTheme(),
  });
}

function App() {
  const { userTheme } = useLoaderData();
  const [theme] = useTheme();

  return (
    <html lang="en" data-theme={theme ?? ""}>
      <head>
        <Meta />
        <Links />
        <PreventFlashOnWrongTheme ssrTheme={userTheme} />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

function AppWithProviders() {
  const { userTheme } = useLoaderData();
  return (
    <ThemeProvider specifiedTheme={userTheme} themeAction="/action/set-theme">
      <AppProvider>
        <ReaderProvider>
          <App />
        </ReaderProvider>
      </AppProvider>
    </ThemeProvider>
  );
}

export default withSentry(AppWithProviders); 

Fetcher call in index.jsx:
fetcher.submit( { type: "test", }, { method: "POST", action: "/api/questions/create" } );

Expected behavior

Expected behaviour is a POST call only during first load of the application.

Platform

MacOS, Chrome. In production, too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant