supabase-swr

A React library to use supabase-js with swr.

Install

Using npm.

1npm install supabase-swr supabase-js swr

Using yarn.

1yarn add supabase-swr supabase-js swr

Usage

Crate a supabase client and pass it to the SwrSupabaseContext.Provider.

1import { createClient } from 'supabase-js';
2import { SwrSupabaseContext } from 'supabase-swr';
3
4const client = createClient('https://xyzcompany.supabase.co', 'public-anon-key');
5
6function App() {
7  return (
8    <SwrSupabaseContext.Provider value={client}>
9      <Routes />
10    </SwrSupabaseContext.Provider>  
11  )
12}

Now you can use in any component the api of supabase-swr.

1import React from 'react';
2import { useClient, useSelect, useQuery } from 'supabase-swr';
3
4type Todo = {
5  id: string,
6  name: string,
7  created_at: string,
8};
9
10const Todos = () => {
11  const todosQuery = useQuery<Todo>('todos', {
12    filter: (query) => query.order('created_at', { ascending: false }),
13  }, []);
14  const {
15    data: {
16      data: todos,
17    },
18    mutate,
19  } = useSelect(todosQuery, {
20    // any swr config
21    revalidateOnMount: true,
22    suspense: true,
23  });
24  return (
25    <ul>
26      {todos.map((todo: Todo) => (
27        <li key={todo.id}>
28          {todo.name}
29        </li>
30      ))}
31    </ul>
32  );
33}

References

• supabase-js
• swr

API

hooks

useClient

Retrieve the supabase-js client instance provided to SwrSupabaseContext.Provider.

1export default function (props) {
2  const client = useClient();
3  // ...
4  return (<>...</>)
5}

useQuery

Create a Query to use with useSelect and other hooks. The created query is also a swr key and can be used with mutate.

1type Todo = {}
2
3export default function (props) {
4  const query = useQuery<Todo>('todos', {
5    // the filter ro apply to the query
6    filter: (q) => q.order('created_at', { ascending: false }),
7    head: false,
8    count: 'exact',
9  });
10  const {
11    data
12  } = useSelect(selectKey, {
13    // swr config here
14  });
15  // ...
16  return (<></>)
17}

useSelect

Retrieve the table data requested. Return and SwrResponse.

1type Todo = {}
2
3export default function (props) {
4  const query = useQuery<Todo>('todos', {
5    // the filter ro apply to the query
6    filter: (q) => q.order('created_at', { ascending: false }),
7    head: false,
8    count: 'exact',
9  });
10  const {
11    data
12  } = useSelect(query, {
13    // swr config here
14  });
15  // ...
16  return (<></>)
17}

useSession

Subscribe to authStateChange event and always return the current session. Useful to use inside component that need to change when the user sign-in or sign-out.

1export default function (props) {
2  const session = useSession();
3  if (!session) return <>Need to sign-in to access this feature</>
4  return (<>...</>)
5}

createQuery

Create a global Query to use with useSelect and other hooks. The created query is also a swr key and can be used with mutate.

1import { useSWRConfig } from 'swr';
2import { useState } from 'react';
3import { createClient } from 'supabase-js';
4import { SwrSupabaseContext, useSelect, createQuery } from 'supabase-swr';
5
6const client = createClient('https://xyzcompany.supabase.co', 'public-anon-key');
7
8type Todo = {
9  id: string,
10  name: string,
11  created_at: string,
12}
13
14const todosQuery = createQuery<Todo>('todos', {
15  columns: '*',
16  // the filter ro apply to the query
17  filter: (q) => q.order('created_at', { ascending: false }),
18})
19
20function AddTodoForm() {
21  const { mutate } = useSWRConfig()
22  const client = useClient()
23  const [todoName, setTodoName] = useState('')
24  const addTodo = () => {
25    client.from<Todo>('todos').insert({
26      name: todoName,
27    }).then(() => {
28      // update the todosQuery inside the TodosList
29      mutate(todosQuery)
30      setTodoName('')
31    })
32  }
33  return (
34    <form name="add-todo">
35      <input name="todo-name" value={todoName} onChange={(e) => setTodoName(e.target.value)} />
36      <button onClick={addTodo}>
37        Add Todo
38      </button>  
39    </form>
40  )
41}
42
43function TodosList() {
44  const {
45    data: {
46      data: todos,
47    },
48  } = useSelect(todosQuery, {
49    // swr config here
50  });
51  // ...
52  return (
53    <ul>
54      {todos.map((todo: Todo) => (
55        <li key={todo.id}>
56          {todo.name}
57        </li>
58      ))}
59    </ul>
60  );
61}
62
63export default function App() {
64  return (
65    <SwrSupabaseContext.Provider value={client}>
66      <TodosList />
67      <AddTodoForm />
68    </SwrSupabaseContext.Provider>
69  )
70}

---

Inspired by react-supabase.