🗣️
Discuss
PA
Paul Aussem
 · Posted in Discuss

How to pass parameters into a Supabase Function using a FF API

General Conversations

I've seen content on how to access Supabase via their built in API layer, but I have yet to find any documents or examples on how to call their API to execute a Supabase function; and even more specifically, a Supabase function with input parameters.

Some API's use the query string to pass parameters, The Supabase API layer does not. Instead you place the parameters in the body of the POST as JSON. If you understand this much then you probably don't need to see the step by step example I will share next:

  • Let's say your function is called fn_testparm, and it looks like this:

CREATE OR REPLACE FUNCTION fn_testparm(p1 int)
RETURNS TABLE (
    id int,
    title text,
    is_deleted boolean
)
AS $$
BEGIN
    -- p1 != null (not passed in properly)
    IF p1 IS NULL THEN
        RAISE EXCEPTION 'Missing p1';
    END IF;
    -- get data (for now, just a stub query for testing)
    -- normally you would use the p1 parameter in the logic in this function
    RETURN QUERY
        SELECT 1000 as id, 'Test Title' as Title, false as is_deleted;
            
EXCEPTION
    WHEN NO_DATA_FOUND THEN
        RAISE EXCEPTION 'No data';
    WHEN OTHERS THEN
        RAISE EXCEPTION 'Error: %', SQLERRM;
END
$$ LANGUAGE plpgsql;

And you want to call this function from FlutterFlow.

Steps are as follows:

  • Test your function in Supabase. In the example above it would be:

SELECT * FROM fn_testparm(3);

Which should return:

  • From the Supabase menu (left side), click the API Docs menu item (at the bottom), and then click on your stored procedure (it should be listed). If you've done this correctly, you will see the following:

  • On the right side, it shows how you would invoke the procedure using JavaScript. For FlutterFlow however, we don't want this.. We want to see an HTTP POST equivalent. So if you click the button labelled "Bash" in the upper right, it will show you this:

  • On the right side, it's now displaying the things we need to know in order to set up the API on the Flutterflow API.

    You'll also notice a button in the upper right that says "Hide". This leaves the apikey: Authorization: stubbed in as SUPABASE_KEY and and Bearer SUPABASE_KEY respectively. When you set things up in Flutterflow, you'll need your Supabase Anon key to be the value for apikey:, and you'll want the Service Role Secret to be the value for the Authorization: header. These can be found in the Supabase Menu, under Settings -> API. You can also choose to "unHide" them to see their value in the current page right side info, but it can be a bit confusing, as it only lets you see the Anon key OR the Service Role Secret one at a time.

  • Open a separate tab for your FlutterFlow project, select the API Calls menu (as seen below):

  • Then click the "+ Add" button, and set up your call and headers section (right side of screen) as seen below. I called the FlutterFlow API testFunction; this is the name that FlutterFlow will use to refer to your API call. Use the Supabase keys mentioned previously for your apikey: and Authorization: content.

  • Next, add a variable; in our example this is the p1 parameter, as seen below. This variable is the thing that allows you to wire an app element (variable) to your API call.

  • Then add the p1 parameter to the Body section as seen below. You drag and drop the p1 variable into the spot you want within your JSON.

  • Now it's time for a test. Click on "Response & Test". This is where you can test your API call to make sure it returns data. See below. I've added 1000 as my p1 test value.

  • Click the "Test API Call" button, and you should see results.

  • Now that you have this set up, you can refer to this API anywhere you make a backend call. The output will be JSON, and you can use JSON path to access data within it OR you can predefine variables right in the "Response & Test" screen you are on. If you scroll down from the response data (seen above), you will see that FlutterFlow has identified elements of your JSON for you and is allowing you to name a predefined path. See below:

  • By clicking "+ Add JSON Path" button beside the element, you can give it a name, and it will be available for reference when setting up the Backend call (no JSON path query required!)

There you have it!

This discussion was made to hone in on Supabase functions and the nuances of their API layer in conjunction with FlutterFlow. There is a very informative API 101 FlutterFlow Doc that should fill in the blanks on generally how to make API calls within FlutterFlow.

5
3 replies