React native Question posted in
The official React Native documentation can be found here.

React native – Does supabase-js createClient create a singleton?

Is it a (memory) issue to call the supabase createClient function every time that you need the client?

I’m integrating Clerk with Supabase in my React Native app, and according to the docs you should get the latest Clerk JWT token before every fetch to supabase, because it is shortlived.

In some Next.js tutorials I find the pattern to create a new client before every fetch and pass it the latest token.

// use this function in every fetch
const supabaseClient = supabaseAccessToken => {
  const supabase = createClient(
    process.env.SUPABASE_URL,
    process.env.SUPABASE_KEY,
    {
      global: { headers: { Authorization: `Bearer ${supabaseAccessToken}` } }
    }
  );
  return supabase;
};

I’m guessing that for Next.js this gets cleaned up well, or it’s a singleton, since this pattern is in official tutorials. What about in React Native? Can I call createClient many times without worrying about memory?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Will answer my own question: I've found a comment from a supabase developer stating that it is best practice to always create a new client:

    is it best practice to create a new supabase client in every api route?

    Yes, it is best practice to create a new Supabase client any time you need to use it. The createClient function is a super lightweight call - it basically just sets up an object to be able to make fetch calls when you want to request data.

    source


  2. 0

    Creating a new Supabase client instance each time you need to make a fetch request can lead to unnecessary overhead and potential memory issues over time. This is because each call to createClient creates a new instance of the client, which could result in the accumulation of multiple client instances if not managed properly.

    However, you can still update the JWT token for each request without creating a new client instance each time.

    here is a better approach:

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

const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseKey = 'YOUR_SUPABASE_KEY';

// Create a single Supabase client instance
const supabase = createClient(supabaseUrl, supabaseKey);

// Function to set the JWT token before each request
const setSupabaseToken = async (supabaseAccessToken) => {
  supabase.auth.setAuth(supabaseAccessToken);
};

// Example function to make a request with the updated token
const fetchData = async () => {
  const supabaseAccessToken = await getClerkJWTToken(); // Replace this with your function to get the latest Clerk JWT token
  await setSupabaseToken(supabaseAccessToken);
  
  // Now make your Supabase request
  const { data, error } = await supabase
    .from('your_table')
    .select('*');

  if (error) {
    console.error(error);
  } else {
    console.log(data);
  }
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search