reactjs 在同一浏览器上下文中检测到多个GoTrueClient示例

mzmfm0qo 于 2023-10-17 发布在 React

关注(0)|答案(4)|浏览(125)

我正在用nextjs和supabase创建一个项目。
由于未知的原因，我在控制台中收到以下警告：
在同一浏览器上下文中检测到多个GoTrueClient示例。这不是一个错误，但应该避免，因为当在同一个存储键下并发使用时，它可能会产生未定义的行为。
我找不到病因
下面是我在_app.tsx中初始化supabase示例的方法：

export default function App({
  Component,
  pageProps,
}: AppProps<{ initialSession: Session }>) {
  const [supabaseClient] = useState(() => createBrowserSupabaseClient());

  return (
    <>
      <style jsx global>
        {`
          :root {
            --font-inter: ${inter.style.fontFamily};
          }
        `}
      </style>
      <SessionContextProvider
        supabaseClient={supabaseClient}
        initialSession={pageProps.initialSession}
      >
        <ChakraProvider theme={theme}>
          <Layout>
            <Component {...pageProps} />
          </Layout>
        </ChakraProvider>
      </SessionContextProvider>
    </>
  );
}

下面是我在组件中使用示例的方式：

const ForgotPassword = () => {
  const toast = useToast();
  const supabase = useSupabaseClient();
...
}

你有没有遇到过这样的问题，可以帮助我了解我做错了什么？

reactjs

来源：https://stackoverflow.com/questions/76773817/multiple-gotrueclient-instances-detected-in-the-same-browser-context

4条答案

按热度按时间

tzdcorbm1#

只运行createClient一次，然后在后续执行时返回该示例
更改代码

import { createClient } from '@supabase/supabase-js';

const supabase = () => createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY);

export default supabase;

到

import { createClient } from '@supabase/supabase-js';

const client = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY);

const supabase = () => client;

export default supabase;

赞(0）回复(0）举报 2023-10-17

aamkag612#

更好的是使用typescript和auth头

import { createClient } from "@supabase/supabase-js";
import { Database } from "@lib/database.types";

const options = {
  auth: {
    localStorage: true,
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: true,
  },
};

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

const client = createClient<Database>(supabaseUrl, supabaseKey, options);

const supabase = () => client;

export default supabase;

赞(0）回复(0）举报 2023-10-17

wj8zmpe13#

我得到这个错误的原因是因为我不得不将auth-helpers-nextjs从0.7.x降级到0.6.x，以支持注册时没有电子邮件确认，
版本0.7.x自动返回createPagesBrowserClient的单例对象
在0.6.x版本中，createBrowserSupabaseClient总是返回新对象而不是单例，
如果在react 18中启用react模式，页面将呈现两次，导致多个GoTrueClients错误。
我如何修复它是通过创建一个新的对象与SupplyClient的单例示例：

import { createBrowserSupabaseClient } from "@supabase/auth-helpers-nextjs";

const SupabaseClient = {
  instance: createBrowserSupabaseClient(),
};

export type SupabaseClientType = typeof SupabaseClient;

Object.freeze(SupabaseClient);

export { SupabaseClient };

然后在_app.tsx中使用它：

const [supabaseClient] = useState(() => SupabaseClient.instance);

现在警告应该消失了。

赞(0）回复(0）举报 2023-10-17

vjrehmav4#

把“浏览器客户端”变成一个单例为我修复了它（但不要为服务器客户端这样做）。

赞(0）回复(0）举报 2023-10-17

我来回答

reactjs 在同一浏览器上下文中检测到多个GoTrueClient示例

4条答案

相关问题

热门标签

最新问答