docs: select

Author: tmm

docs/pages/documentation/data/use-delete.md

@@ -2,15 +2,17 @@
 
 Performs a DELETE on the table.
 
-```js highlight=4,5,6,7,8,9,10,11,12,13,14
+```js highlight=4,5,6,7,8,9,10,11,12,13,14,15,16
 import { useDelete } from 'react-supabase'
 
 function Page() {
   const [
-    { count, data, error, fetching }, deleteTodos] = useDelete(
+    { count, data, error, fetching },
+    deleteTodos,
+  ] = useDelete(
     'todos',
+    // Passing optional options
     {
-      // Passing optional options
       options: {
         returning: 'represenation',
         count: 'exact',

docs/pages/documentation/data/use-insert.md

@@ -1 +1,33 @@
 # useInsert
+
+Performs an INSERT into the table.
+
+```js highlight=4,5,6,7,8,9,10,11,12,13
+import { useInsert } from 'react-supabase'
+
+function Page() {
+  const [{ count, data, error, fetching }, insertTodo] = useInsert(
+    'todos',
+    // Passing optional options
+    {
+      options: {
+        returning: 'represenation',
+        count: 'exact',
+      },
+    },
+  )
+
+  async function onClickDelete(id) {
+    const { count, data, error } = await deleteTodos(
+      (query) => query.eq('id', id),
+      {
+        // Override options from hook init
+        returning: 'minimal',
+        count: 'estimated',
+      },
+    )
+  }
+
+  return ...
+}
+```

docs/pages/documentation/data/use-select.md

@@ -1,7 +1,55 @@
-import Callout from 'nextra-theme-docs/callout'
+import Link from 'next/link'
 
 # useSelect
 
-<Callout>
-  When using a dynamic `filter`, you must ...
-</Callout>
+Performs vertical filtering with SELECT.
+
+```js highlight=4,5,6,7,8,9,10,11,12,13,14,15,16,17,18
+import { useSelect } from 'react-supabase'
+
+function Page() {
+  const [
+    { count, data, error, fetching },
+    selectTodos,
+  ] = useSelect(
+    'todos',
+    // Passing optional options
+    {
+      columns: 'id, name, description',
+      filter: (query) => query.eq('status', 'completed'),
+      options: {
+        count: 'exact',
+        head: false,
+      },
+    },
+  )
+
+  if (error) return <div>{error.message}</div>
+  if (fetching) return <div>Loading todos</div>
+  if (data?.length === 0) return <div>No todos</div>
+
+  return ...
+}
+```
+
+## Dynamic filtering
+
+When using dynamic filters, you must make sure filters aren't recreated every render. Otherwise, your request can get stuck in an infinite loop.
+
+The easiest way to avoid this is to create dynamic filters with the [`useFilter`](/documentation/data/use-filter) hook:
+
+```js
+import { useState } from 'react'
+import { useFilter, useSelect } from 'react-supabase'
+
+function Page() {
+  const [status, setStatus] = useState('completed')
+  const filter = useFilter(
+    (query) => query.eq('status', status),
+    [status],
+  )
+  const [{ data }] = useSelect('todos', { filter })
+
+  return ...
+}
+```

docs/pages/documentation/recipes/live-table.md

@@ -0,0 +1,7 @@
+# useTable
+
+Realtime table
+
+```js
+import { useSelect, useSubscription } from 'react-supabase'
+```

docs/pages/documentation/recipes/meta.json

@@ -1,3 +1,4 @@
 {
-    "user-context": "UserContext"
+    "user-context": "UserContext",
+    "live-table": "useTable"
 }

src/hooks/data/use-select.ts

@@ -17,8 +17,8 @@ export type UseSelectResponse<Data = any> = [
 ]
 
 export type UseSelectOptions = {
-    head?: boolean
     count?: null | Count
+    head?: boolean
 }
 
 export type UseSelectConfig<Data = any> = {