Использование конечных точек HTTP Supabase в приложении Elm

Обзор

Ваше приложение может получить доступ к Supabase двумя способами — через их «API» и через их «API». Позволь мне объяснить:

Во-первых: доступ к Supabase можно получить через традиционный REST API. С ними вы можете использовать эквиваленты JavaScript-команды «fetch». Вы можете увидеть нужные вам URL-адреса в подразделе «Bash» раздела API панели управления вашего проекта Supabase.

READ ALL ROWS
curl '<https://abcdefghij.supabase.co/rest/v1/reports?select=*>' \\
-H "apikey: SUPABASE_KEY" \\
-H "Authorization: Bearer SUPABASE_KEY"

Второе: Supabase также предоставляет вам библиотеки, в том числе одну на языке JavaScript, которые абстрагируют команды выборки. Вы можете узнать, как получить доступ к своим данным, в подразделе «JavaScript» раздела API вашей панели управления. В библиотеке все, что вам нужно сделать, это указать операцию и ее параметры. Это избавляет вас от повторного указания команд выборки, URL-адреса и учетных данных.

Я решил сделать свой последний сторонний проект, используя REST API для доступа к Supabase. Мои рассуждения были:

  1. Меньше кода в JavaScript. Я подумал, что если бы весь код был в Elm, шансов на необработанные ошибки было бы меньше. Это сохранялось даже в конце проекта.
  2. Меньшее количество декодеров. Было глупо с моей стороны ожидать, что я буду писать меньше декодеров в Elm, если выберу конечные точки HTTP — они будут одинаковыми независимо от метода доступа.
  3. Меньше стандартного кода. В итоге я написал меньше шаблонного кода — не нужно было настраивать исходящие порты, не нужно было подписываться на них в JavaScript и не нужно было подписываться на данные входящих портов в Elm.

Выполнение HTTP-вызовов Supabase из Elm:

Вот как выглядит HTTP-запрос в Elm:

HTTP-вызовы к Supabase требуют, чтобы вы указали: URL-адрес, apikey, метод и ключ авторизации, если вы получаете доступ к данным, защищенным на уровне строк.

Чтобы найти их:

  • Перейдите в [Ваш проект] › API › Введение, чтобы получить «URL-адрес API». Все остальные URL-адреса, которые вы будете использовать, будут его вариациями. Однако, если вы используете API-интерфейсы хранилища, вам необходимо добавить «/storage/v1/object/[bucket name]» к URL-адресу проекта, чтобы заставить его работать.

  • Перейдите в [Ваш проект] › API › [имя таблицы] и в верхней части крайнего правого столбца выберите «Bash», нажмите кнопку «скрыть» и выберите «anon (public)».
  • Прокрутите вниз до раздела, описывающего, что вы хотите сделать (например, «Читать строки»). Справа вы увидите URL-адрес, метод, который он использует (DELETE, GET, POST или PUT), «apikey» и параметры, необходимые для операции. (Обратите внимание, что «ключ авторизации» не будет точным, поскольку этот ключ создается только после входа пользователя в систему.)
curl -X POST '<https://xyz.supabase.co/rest/v1/>[table name]' \\
-H "apikey: SUPABASE_KEY" \\
-H "Authorization: Bearer SUPABASE_KEY" \\
-H "Content-Type: application/json" \\
-H "Prefer: return=representation" \\
-d '{ "some_column": "someValue", "other_column": "otherValue" }'

Создайте HTTP-вызов.

  • Обратите внимание, что вы будете передавать «apikey» (и все, что начинается с «-H» в крайнем правом столбце) в качестве заголовка. (Обратите внимание, что для ключа «Авторизация» перед значением необходимо добавить слово «Носитель».) Например:
-H "apikey: SUPABASE_KEY" \\
-H "Authorization: Bearer SUPABASE_KEY" \\
-H "Content-Type: application/json" \\
-H "Prefer: return=representation" \\

превращается в

  • Закодируйте все необходимые параметры (все, что начинается с «-d» в крайнем правом столбце) как JSON и передайте их как jsonBody запроса. (Обратите внимание, что иногда требуются списки параметров.) Например:
-d '{ "some_column": "someValue", "other_column": "otherValue" }'

превращается в

  • Укажите, как будет обрабатываться ответ.
  1. Что ожидается в ответ? Будет ли это строка, какой-то JSON или несколько байтов. Вы также можете игнорировать все отправленное.
  2. Напишите декодер для обработки ответа, если вы его не игнорируете.
  3. Укажите формат сообщения, которое будет отправлено после декодирования ответа.
  4. Напишите обработчик сообщения в функции обновления.
, expect = Http.expectJson UserSignedUp signUpResponseDecoder

Болевые точки:

  • Самая большая проблема — отсутствие документации у Supabase.
  1. Формат ответов нигде не указан. Нужно использовать программное обеспечение, такое как Postman, чтобы выяснить, что может быть возвращено. Полагаю, Supabase, возможно, справедливо считает, что большинство их пользователей будут использовать предоставленную ими библиотеку.
  2. Ссылка на использование REST API Supabase Storage спрятана в документации. API также не совсем точен — некоторые URL-адреса нуждаются в небольшой настройке (вам нужно будет добавить «/storage/v1/object/[bucket name]» к показанному URL-адресу), прежде чем они будут работать, и возвращаемые типы, хотя и указаны здесь не все, как указано.
  3. Вы можете смягчить эту проблему, используя Postman или плагин Rested для проверки ваших HTTP-вызовов и выяснения того, что возвращается.
  • Политики для «объекта» должны быть настроены в Supabase, прежде чем к хранилищу можно будет получить безопасный доступ. Я потратил довольно много времени, чтобы понять это, потому что вы получаете очень неясные ошибки только тогда, когда что-то терпит неудачу.
  • В Elm нужно написать много кода для обработки HTTP-вызова. Однако знайте, что как только вы закончите, у вас в руках будет пуленепробиваемое приложение. Никаких ошибок во время выполнения!

Однако, как только у меня все было запущено и запущено, пользоваться веб-приложением было очень приятно и очень приятно.

Надеюсь, все это помогло вам использовать Supabase в приложении Elm!