Missing some query string params when multiple are used with supabase_edge_functions

[Rodrigo Mansueli]

I've deployed this after compiling it with edge build supabase_functions --dev as the main isn't working.

However , I expected to get all the query params with the following call:

import 'package:edge/edge.dart';
import 'package:supabase_functions/supabase_functions.dart';


void main() {
    SupabaseFunctions(fetch: (request) async {
        final text = request.url.queryParameters['text'] ?? 'Hello, world!';
        final height = request.url.queryParameters['height'] ?? '630';
        final length = request.url.queryParameters['length'] ?? '1200';
        final pattern = request.url.queryParameters['pattern'] ?? '';
        final pcolor = request.url.queryParameters['pcolor'] ?? '#040703';
        final scolor = request.url.queryParameters['scolor'] ?? '#055C13';
        final text_color = request.url.queryParameters['text_color'] ?? '#FFFFFF';
        final svg = generateOGImage(text, int.parse(height), int.parse(length), pattern, pcolor, scolor, text_color);
        final headers = Headers({'Content-Type': 'text/plain', 'Cache-Control': 'public, max-age=3600'});
        String all_query_string = 'Text: $text \nHeight: $height \nLength: $length \nPattern: $pattern \nPrimary Color: $pcolor \nSecondary Color: $scolor \nText Color: $text_color'; 
        return Response(utf8.encode(all_query_string),
        status: 200,
        headers: headers
                       );
    });
}

For example a call to:

https://jpzwvyukydqlzwgvncyj.functions.supabase.co/dart_edge?pattern=surf&scolor=#FFFFFF&text_color=#FF0000&text=generate%20images%20with%20dart%20edge

Should return:

Text: Generate images with dart edge
Height: 630 
Length: 1200 
Pattern: surf 
Primary Color: #040703 
Secondary Color:  #FFFFFF
Text Color: #FF0000

I get the following:

Text: Hello, world! 
Height: 630 
Length: 1200 
Pattern: surf 
Primary Color: #040703 
Secondary Color:  
Text Color: #FFFFFF

Another example as it seems that terms disappear and even get swapped randomly:

https://jpzwvyukydqlzwgvncyj.functions.supabase.co/dart_edge?pattern=surf&height=800&text=generate%20images%20with%20dart%20edge&pcolor=#100000&scolor=#FFF&text_color=#FF0000

Expected results:

Text: generate images with dart edge 
Height: 800 
Length: 1200 
Pattern: surf 
Primary Color: #100000
Secondary Color:  #FFF
Text Color: #FF0000

Actual results:

Text: generate images with dart edge 
Height: 800 
Length: 1200 
Pattern: surf 
Primary Color:  
Secondary Color: #055C13 
Text Color: #FFFFFF

[Elliot Hesp]

I wonder whether this is to do with how Dart URI handles query strings differently to how JS does. I'll add a test case.

[Mike Diarmid]

I think you need to url encode your '#'s in your URL, your URL in any browser will drop any params after the first hash since it will treat it as a hash/location id;

e.g.

const u = new URL("https://jpzwvyukydqlzwgvncyj.functions.supabase.co/dart_edge?pattern=surf&height=800&text=generate%20images%20with%20dart%20edge&pcolor=#100000&scolor=#FFF&text_color=#FF0000")
console.log(u.hash); // '#100000&scolor=#FFF&text_color=#FF0000'
console.log(u.searchParams.toString()); // 'pattern=surf&height=800&text=generate+images+with+dart+edge&pcolor='

But if your hashes are URL encoded then it works as expected:

const u2 = new URL("https://jpzwvyukydqlzwgvncyj.functions.supabase.co/dart_edge?pattern=surf&height=800&text=generate%20images%20with%20dart%20edge&pcolor=%23100000&scolor=%23FFF&text_color=%23FF0000")
console.log(u2.hash); // ''
console.log(u2.searchParams.toString()); // 'pattern=surf&height=800&text=generate+images+with+dart+edge&pcolor=%23100000&scolor=%23FFF&text_color=%23FF0000'