{"id":15173432,"url":"https://github.com/alfredosalzillo/supabase-swr","last_synced_at":"2025-10-01T10:31:35.011Z","repository":{"id":42044499,"uuid":"400761564","full_name":"alfredosalzillo/supabase-swr","owner":"alfredosalzillo","description":"A https://github.com/supabase/supabase-js client to use whit https://github.com/vercel/swr","archived":true,"fork":false,"pushed_at":"2023-03-25T15:41:28.000Z","size":203,"stargazers_count":40,"open_issues_count":2,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-15T07:16:18.980Z","etag":null,"topics":["api","react","react-hooks","supabase","supabase-client","supabase-js","swr","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alfredosalzillo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["alfredosalzillo"]}},"created_at":"2021-08-28T10:12:47.000Z","updated_at":"2024-08-19T12:16:51.000Z","dependencies_parsed_at":"2024-11-14T13:20:05.204Z","dependency_job_id":"df38a9de-19e7-4897-9202-a384014d2b3a","html_url":"https://github.com/alfredosalzillo/supabase-swr","commit_stats":{"total_commits":18,"total_committers":3,"mean_commits":6.0,"dds":"0.16666666666666663","last_synced_commit":"72bc4505a51efdadc24f40d892601f4ba42099d1"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alfredosalzillo%2Fsupabase-swr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alfredosalzillo%2Fsupabase-swr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alfredosalzillo%2Fsupabase-swr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alfredosalzillo%2Fsupabase-swr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alfredosalzillo","download_url":"https://codeload.github.com/alfredosalzillo/supabase-swr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234858892,"owners_count":18897829,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","react","react-hooks","supabase","supabase-client","supabase-js","swr","typescript"],"created_at":"2024-09-27T11:01:04.671Z","updated_at":"2025-10-01T10:31:34.655Z","avatar_url":"https://github.com/alfredosalzillo.png","language":"TypeScript","funding_links":["https://github.com/sponsors/alfredosalzillo"],"categories":[],"sub_categories":[],"readme":"# supabase-swr\n\nA React library to use [supabase-js](https://github.com/supabase/supabase-js) with [swr](https://github.com/vercel/swr).\n\n## Install\n\nUsing npm.\n\n```shell\nnpm install supabase-swr supabase-js swr\n```\n\nUsing yarn.\n\n```shell\nyarn add supabase-swr supabase-js swr\n```\n\n## Usage\n\nCrate a supabase client and pass it to the `SwrSupabaseContext.Provider`.\n\n```typescript jsx\nimport { createClient } from 'supabase-js';\nimport { SwrSupabaseContext } from 'supabase-swr';\n\nconst client = createClient('https://xyzcompany.supabase.co', 'public-anon-key');\n\nfunction App() {\n  return (\n    \u003cSwrSupabaseContext.Provider value={client}\u003e\n      \u003cRoutes /\u003e\n    \u003c/SwrSupabaseContext.Provider\u003e  \n  )\n}\n```\n\nNow you can use in any component the api of supabase-swr.\n\n```typescript jsx\nimport React from 'react';\nimport { useClient, useSelect, useQuery } from 'supabase-swr';\n\ntype Todo = {\n  id: string,\n  name: string,\n  created_at: string,\n};\n\nconst Todos = () =\u003e {\n  const todosQuery = useQuery\u003cTodo\u003e('todos', {\n    filter: (query) =\u003e query.order('created_at', { ascending: false }),\n  }, []);\n  const {\n    data: {\n      data: todos,\n    },\n    mutate,\n  } = useSelect(todosQuery, {\n    // any swr config\n    revalidateOnMount: true,\n    suspense: true,\n  });\n  return (\n    \u003cul\u003e\n      {todos.map((todo: Todo) =\u003e (\n        \u003cli key={todo.id}\u003e\n          {todo.name}\n        \u003c/li\u003e\n      ))}\n    \u003c/ul\u003e\n  );\n}\n```\n\n## References\n\n- [supabase-js](https://github.com/supabase/supabase-js)\n- [swr](https://github.com/vercel/swr)\n\n## API\n\n### hooks\n\n#### useClient\n\nRetrieve the supabase-js client instance provided to `SwrSupabaseContext.Provider`.\n\n```typescript jsx\nexport default function (props) {\n  const client = useClient();\n  // ...\n  return (\u003c\u003e...\u003c/\u003e)\n}\n```\n\n#### useQuery\n\nCreate a `Query` to use with `useSelect` and other hooks.\nThe created query is also a [swr](https://github.com/vercel/swr) key and can be used with [mutate](https://swr.vercel.app/docs/mutation).\n\n```typescript jsx\ntype Todo = {}\n\nexport default function (props) {\n  const query = useQuery\u003cTodo\u003e('todos', {\n    // the filter ro apply to the query\n    filter: (q) =\u003e q.order('created_at', { ascending: false }),\n    head: false,\n    count: 'exact',\n  });\n  const {\n    data\n  } = useSelect(selectKey, {\n    // swr config here\n  });\n  // ...\n  return (\u003c\u003e\u003c/\u003e)\n}\n```\n\n#### useSelect\n\nRetrieve the `table` data requested. \nReturn and SwrResponse.\n\n```typescript jsx\ntype Todo = {}\n\nexport default function (props) {\n  const query = useQuery\u003cTodo\u003e('todos', {\n    // the filter ro apply to the query\n    filter: (q) =\u003e q.order('created_at', { ascending: false }),\n    head: false,\n    count: 'exact',\n  });\n  const {\n    data\n  } = useSelect(query, {\n    // swr config here\n  });\n  // ...\n  return (\u003c\u003e\u003c/\u003e)\n}\n```\n\n### useSession\n\nSubscribe to `authStateChange` event and always return the current session.\nUseful to use inside component that need to change when the user sign-in or sign-out.\n\n```typescript jsx\nexport default function (props) {\n  const session = useSession();\n  if (!session) return \u003c\u003eNeed to sign-in to access this feature\u003c/\u003e\n  return (\u003c\u003e...\u003c/\u003e)\n}\n```\n## createQuery\n\nCreate a global `Query` to use with `useSelect` and other hooks.\nThe created query is also a [swr](https://github.com/vercel/swr) key and can be used with [mutate](https://swr.vercel.app/docs/mutation).\n\n```typescript jsx\nimport { useSWRConfig } from 'swr';\nimport { useState } from 'react';\nimport { createClient } from 'supabase-js';\nimport { SwrSupabaseContext, useSelect, createQuery } from 'supabase-swr';\n\nconst client = createClient('https://xyzcompany.supabase.co', 'public-anon-key');\n\ntype Todo = {\n  id: string,\n  name: string,\n  created_at: string,\n}\n\nconst todosQuery = createQuery\u003cTodo\u003e('todos', {\n  columns: '*',\n  // the filter ro apply to the query\n  filter: (q) =\u003e q.order('created_at', { ascending: false }),\n})\n\nfunction AddTodoForm() {\n  const { mutate } = useSWRConfig()\n  const client = useClient()\n  const [todoName, setTodoName] = useState('')\n  const addTodo = () =\u003e {\n    client.from\u003cTodo\u003e('todos').insert({\n      name: todoName,\n    }).then(() =\u003e {\n      // update the todosQuery inside the TodosList\n      mutate(todosQuery)\n      setTodoName('')\n    })\n  }\n  return (\n    \u003cform name=\"add-todo\"\u003e\n      \u003cinput name=\"todo-name\" value={todoName} onChange={(e) =\u003e setTodoName(e.target.value)} /\u003e\n      \u003cbutton onClick={addTodo}\u003e\n        Add Todo\n      \u003c/button\u003e  \n    \u003c/form\u003e\n  )\n}\n\nfunction TodosList() {\n  const {\n    data: {\n      data: todos,\n    },\n  } = useSelect(todosQuery, {\n    // swr config here\n  });\n  // ...\n  return (\n    \u003cul\u003e\n      {todos.map((todo: Todo) =\u003e (\n        \u003cli key={todo.id}\u003e\n          {todo.name}\n        \u003c/li\u003e\n      ))}\n    \u003c/ul\u003e\n  );\n}\n\nexport default function App() {\n  return (\n    \u003cSwrSupabaseContext.Provider value={client}\u003e\n      \u003cTodosList /\u003e\n      \u003cAddTodoForm /\u003e\n    \u003c/SwrSupabaseContext.Provider\u003e\n  )\n}\n```\n\n---\n\nInspired by [react-supabase](https://github.com/tmm/react-supabase).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falfredosalzillo%2Fsupabase-swr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falfredosalzillo%2Fsupabase-swr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falfredosalzillo%2Fsupabase-swr/lists"}