Reactjs 将 clerk 与 supabase 集成的最佳实践

这种方法的问题是，每次您呼叫useSupabase时，useEffect都会运行，因为生命周期将从您放入的每个组件开始.

你说得对，我们应该在某个地方处理这件事.

解决这个问题的一个好方法是创建一个拥有React.Context个人的Provider .

const SupabaseContext = useContext({
  supabase: undefined,
  loading: false,
  error: undefined
})

export const SupabaseProvider({ children }) {
  const { getToken } = useAuth()

  const [supabase, setSupabase] = useState<SupabaseClient>()
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState()

  useEffect(() => {
    const fetchTokenAndInitializeClient = async () => {
      try {
        const token = await getToken({ template: 'supabase' })
        if (!token) {
          throw new Error('No token found')
        }
        const supabase = createSupabaseClient(token)
        setSupabase(supabase)
      } catch (err) {
        setError(err as any)
      } finally {
        setLoading(false)
      }
    }

    fetchTokenAndInitializeClient()
  }, [getToken])

  return (
    <SupabaseContext.Provider value={{ supabase, loading, error }}>
      {children}
    </SupabaseContext.Provider>
  )
}

现在，您可以将其包装在应用程序的顶层，如下所示:

const App = () => (
  <SupabaseProvider>
    ...
  </SupabaseProvider>
)

在下面的组件中，您可以使用钩子访问supabase(以及它的加载和错误状态):

const { supabase, loading, error } = useContext(SupabaseContext);

如果您不想担心所有子组件中的loading状态，则可以在应用程序中使用更高级别的Guard语句，以便仅在loading为False时才呈现子组件.

下面是一个在你SupabaseProvider岁时在顶层做到这一点的例子:

return (
  <SupabaseContext.Provider value={{ supabase, loading, error }}>
    {isloading ? <LoadingSupabase /> : children}
  </SupabaseContext.Provider>
)