Как настроить Supabase в React? И несколько полезных советов

Целевая аудитория

Я нацелил эту статью на людей, которые хотят узнать о React и Supabase.

Цели обучения

После завершения этой статьи вы будете знать, как сделать следующее:

• Создать приложение React
• Настроить Supabase
• Получать данные из Supabase
• Выполнять CRUD-операции в Supabase

Что такое Supabase?

Supabase — это альтернатива Firebase с открытым исходным кодом. Начните свой проект с базы данных Postgres, аутентификации, мгновенных API, подписки в реальном времени и хранения данных.

Разница между базой данных Firestore и базой данных Postgres Supabase заключается в том, что Firestore — это база данных NoSQL, а Supabase — реляционная база данных.

Настройка проекта

Вы можете ознакомиться с официальной документацией Supabase по настройке проекта. Вы должны создать проект в приборной панели Supabase. Существует несколько документаций по настройке для различных фреймворков, но в этой статье я расскажу о React.

Создайте проект

1. Перейдите на сайт app.supabase.com.
2. Нажмите на «Новый проект».
3. Введите информацию о проекте.
4. Дождитесь запуска новой базы данных.

Создание приложения

Выполните следующие шаги для создания приложения.

1 — Создайте приложение react

npx create-react-app supabase-react
cd supabase-react

2 — Установите библиотеку supabase-js

npm install @supabase/supabase-js

3 — Добавьте переменные окружения в файл .env.

Вы можете получить эти переменные из приборной панели Supabase.

REACT_APP_SUPABASE_URL=YOUR_SUPABASE_URL
REACT_APP_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

4 — Создайте клиента Supabase

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

const supabaseUrl = process.env.REACT_APP_SUPABASE_URL
const supabaseAnonKey = process.env.REACT_APP_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

Мы можем использовать этот клиент для авторизации, получения или изменения данных из базы данных и т.д.

5 — Создание службы

Мы создадим сервис dummyService, в котором мы создадим грубые функции, использующие операции Supabase. Мы можем ссылаться на этот сервис из других компонентов для его использования, чтобы не дублировать код в нашем проекте.

• Создаем функцию

async function Create(id, name){
    let response = await supabase // this is our client
        .from("dummy")
        .insert({
            id: id,
            name: name
        })
    return response
}   

Как вы можете видеть, для операции создания мы используем операцию insert из Supabase.

• Функция чтения

async function Get(name){
    let response = await supabase // this is our client
    .from("dummy")
    .select("*")
    .eq("name", name)
    return response
}   

• Функция обновления

async function Update(id,name){
    let response = await supabase // this is our client
    .from("dummy")
    .update({ name: name })
    .match({ id: id })

    return response
}   

• Функция удаления

async function Delete(id){
    let response = await supabase // this is our client
    .from("dummy")  
    .delete()  
    .match({ id: id })

    return response
}   

Таким образом, мы можем создать сервис, содержащий эти методы, и когда мы захотим его использовать, мы можем импортировать этот сервис. Создание сервиса для определенного домена важно, потому что это не позволяет нам создавать дублирующий код в нашем проекте, поэтому по мере увеличения кодовой базы его легче поддерживать.

Пример использования:

import { dummyService } from ".../somewhere"
...
var item = dummyService.Get("name")
return(
<p>{item}</p>
)
...

Иногда мы хотим получить данные перед рендерингом страницы. В таких сценариях мы можем использовать хуки useEffect и useState в React. Мы можем вызывать наши сервисные функции внутри хука useEffect, и мы можем создать состояние для загрузки состояния нашей страницы.

Пример использования этого показан ниже:

function AnExampleComponent() {
    const [loading, setLoading] = useState(true);
    const [items, setItems] = useState(null)


    let getDataFromService = async (name) => {
        setLoading(true)
        let { data } = await dummyService.Get(name);
        if(data) setItems(data);
        setLoading(false)
    }
    useEffect(() => {
        getDataFromService("stuff")
    }, [])
    return(
    ...
    )
}

Как видно из примера, мы создаем состояние загрузки для получения данных. Это состояние даст нам информацию о том, завершился ли вызов сервиса или нет. Если мы не закончили сервисный запрос, или он может занять много времени. Мы можем показать состояние загрузки для лучшего восприятия пользователем. Или мы можем обрабатывать другие состояния, которые приходят от нашего сервиса, такие как error. Таким образом, если в функции нашего сервиса произошла ошибка, мы можем показать эту информацию в пользовательском интерфейсе, если это необходимо.