Supabase v2动态切换不同Schema问题求助

我正在使用"@supabase/supabase-js": "2.4.1"版本，无法实现动态切换Schema。

v1版本实现方式 #

在v1版本中，我可以将Schema传入自定义hooks，通过以下方式创建Supabase客户端并操作数据：

创建客户端：

const newOptions = {
  ...options,
  schema: schema || 'public',
};

const supabase = createClient(
  // @ts-ignore
  process.env['NX_SUPABASE_URL'],
  process.env['NX_SUPABASE_ANON_KEY'],
  newOptions
);

数据操作：

const firstIndex = page * size - size;
const secondIndex = page * size - 1;
const { data, error: dataError } = await supabase
  .from(table)
  .select(select)
  .range(firstIndex, secondIndex);

v2版本尝试的无效方法 #

但在v2版本中，Supabase客户端在应用根节点声明，我尝试通过以下方式设置选项却无效：

根组件代码：

const [supabaseOptions, setSupabaseOptions] = useState({});
const [supabaseClient] = useState(() => createBrowserSupabaseClient(supabaseOptions));

return (
  <SessionContextProvider
    supabaseClient={supabaseClient}
    initialSession={pageProps.initialSession}
  >
    <Layout>
      <Component {...pageProps} setSupabaseOptions={setSupabaseOptions} />
    </Layout>
  </SessionContextProvider>
);

组件中修改选项：

useEffect(() => {
  console.log('props', props);
  props.setSupabaseOptions(s => ({
    ...s,
    options: {
      ...s.options,
      schema: 'custom',
    },
  }));
}, []);

正确解决方式 #

Supabase v2的客户端实例是不可变的，创建后无法修改其初始配置，所以上述修改配置的方式不生效。提供两种可行方案：

方案1：单个查询临时切换Schema #

如果仅需针对部分查询使用不同Schema，直接在查询链中调用schema()方法即可：

const firstIndex = page * size - size;
const secondIndex = page * size - 1;
const { data, error: dataError } = await supabase
  .schema('custom') // 指定本次查询使用的Schema
  .from(table)
  .select(select)
  .range(firstIndex, secondIndex);

方案2：全局切换Schema，重新创建客户端实例 #

如果需要全局切换Schema（比如多租户场景），需在Schema变化时重新创建Supabase客户端，并更新Context中的实例：

根组件修改：

const [activeSchema, setActiveSchema] = useState('public');

// 当activeSchema变更时，重新生成客户端实例
const supabaseClient = useMemo(() => {
  return createBrowserSupabaseClient({
    options: {
      schema: activeSchema,
    },
  });
}, [activeSchema]);

return (
  <SessionContextProvider
    supabaseClient={supabaseClient}
    initialSession={pageProps.initialSession}
  >
    <Layout>
      <Component {...pageProps} setActiveSchema={setActiveSchema} />
    </Layout>
  </SessionContextProvider>
);

组件中触发Schema切换：

useEffect(() => {
  // 切换到自定义Schema
  props.setActiveSchema('custom');
}, []);

注意：重新创建客户端会保留当前会话信息，无需重新登录。

内容的提问来源于stack exchange，提问作者Eko Andri