Correct Way to Fetch Data from Multiple Schemas from Supabase?

[horizon-phoenix-fly]

I'm trying to fetch data from different schemas using Supabase. By default, Refine only allows access to the public schema. However, I discovered that we can utilize multiple dataProviders, so I set up two: one for the public schema and another for the booking schema.

After doing this, I encountered a console warning:
Multiple GoTrueClient instances detected in the same browser context. It is not an error, but this should be avoided as it may produce undefined behavior when used concurrently under the same storage key.

Can someone advise on the proper way to fetch data from multiple schemas in Supabase to avoid this warning?
Thanks :)

[BatuhanW]

Hello @horizon-phoenix-fly, I think it's more of a supabase question, rather than refine. I think we don't limit you to access only public schema, you can pass your own client initiated with different schema to our data provider and it should work. And as you mentioned, you can use multiple data providers to access different schemas. I think this warning pops up because you have multiple supabase clients.

[horizon-phoenix-fly]

Can you share me a codesandbox demo, how can we use refine to fetch data from multiple schema without creating multiple supabase clients.

It'll be really helpful.
Thanks :)

[BatuhanW]

First, you need to swizzle supabase data provider: https://refine.dev/docs/tutorial/understanding-dataprovider/swizzle/#what-is-swizzle

https://refine.dev/docs/examples/data-provider/supabase/

And then I think you can utilize meta field to achieve it: https://refine.dev/docs/tutorial/understanding-dataprovider/create-dataprovider/#meta-usage

You can pass props to your data provider, through meta property.

[horizon-phoenix-fly]

Thank you, @BatuhanW, for your detailed response.
However, I'm finding it a bit challenging to grasp the examples. I'm working on understanding it on my side. If you could provide a working CodeSandbox link, that would be immensely helpful.

Thank you! :)

[aliemir]

Hey @horizon-phoenix-fly, as an addition to the @BatuhanW's answer, I want to write a quick guide on how to achieve using multiple schemas in refine's supabase integration after swizzling the data provider.

By using the swizzle command, you'll have the implementation of the @refinedev/supabase's dataProvider and liveProvider copied in your project. Hoping this is clear so far.

After that we'll need to add a small feature that allows you to pick schemas instead of passing it once when creating the supabase client.

You'll see that the data provider consists of couple of methods to achieve every crud operation. If this is not clear, I'm strongly advising you to check out the documents @BatuhanW shared above.

Let me try to implement the multiple schema feature in the create method, you can then apply this to other methods.

create: async ({ resource, variables, meta }) => {
-    const query = supabaseClient.from(resource).insert(variables);
+    const query = supabaseClient.schema(meta?.schema ?? "public").from(resource).insert(variables);

    if (meta?.select) {
        query.select(meta.select);
    }

    const { data, error } = await query;

    if (error) {
        return handleError(error);
    }

    return {
        data: (data || [])[0] as any,
    };
},

Hope this helps 🙏