tmm/use select pause (#15)

* feat: add pause to select

* fix: types

Author: tmm

README.md

@@ -20,7 +20,7 @@ npm install --save react-supabase @supabase/supabase-js
 
 Create a Supabase client and pass it to the `Provider`:
 
-```js
+```tsx
 import { createClient } from '@supabase/supabase-js'
 import { Provider } from 'react-supabase'
 
@@ -35,7 +35,7 @@ const App = () => (
 
 Now every component inside and under the `Provider` can use the Supabase client and hooks:
 
-```js
+```tsx
 import { useRealtime } from 'react-supabase'
 
 const Todos = () => {

docs/pages/documentation/auth/use-auth-state-change.md

@@ -2,7 +2,7 @@
 
 Receive a notification every time an auth event happens. Composed in the [`useAuth` recipe](/recipes/use-auth).
 
-```js highlight=4,5,6
+```tsx highlight=4,5,6
 import { useAuthStateChange } from 'react-supabase'
 
 function Page() {

docs/pages/documentation/auth/use-reset-password.md

@@ -2,7 +2,7 @@
 
 Sends reset request to email address.
 
-```js highlight=4
+```tsx highlight=4
 import { useResetPassword } from 'react-supabase'
 
 function Page() {
@@ -23,7 +23,7 @@ function Page() {
 
 During hook initialization:
 
-```js
+```tsx
 const [{ error, fetching }, resetPassword] = useResetPassword({
   options: {
     redirectTo: 'https://example.com/welcome',
@@ -33,7 +33,7 @@ const [{ error, fetching }, resetPassword] = useResetPassword({
 
 Or execute function:
 
-```js
+```tsx
 const { error } = await resetPassword('user@example.com', {
   redirectTo: 'https://example.com/reset',
 })

docs/pages/documentation/auth/use-signin.md

@@ -2,7 +2,7 @@
 
 Log in existing user, or login via a third-party provider.
 
-```js highlight=4
+```tsx highlight=4
 import { useSignIn } from 'react-supabase'
 
 function Page() {
@@ -27,7 +27,7 @@ function Page() {
 
 During hook initialization:
 
-```js
+```tsx
 const [{ error, fetching, session, user }, signIn] = useSignIn({
   options: {
     redirectTo: 'https://example.com/dashboard',
@@ -37,7 +37,7 @@ const [{ error, fetching, session, user }, signIn] = useSignIn({
 
 Or the execute function:
 
-```js
+```tsx
 const { error, session, user } = await signIn(
   {
     email: 'user@example.com',
@@ -53,15 +53,15 @@ const { error, session, user } = await signIn(
 
 Omit password from the execute function:
 
-```js
+```tsx
 const { error, session, user } = await signIn({ email: 'user@example.com' })
 ```
 
 ## Third-party providers
 
 Either pass a provider (and scopes) during hook initialization:
 
-```js
+```tsx
 const [{ error, fetching, user, session }, signIn] = useSignIn({
   provider: 'github',
   options: {
@@ -72,7 +72,7 @@ const [{ error, fetching, user, session }, signIn] = useSignIn({
 
 Or execute function:
 
-```js
+```tsx
 const { error, session, user } = await signIn(
   { provider: 'github' },
   { scopes: 'repo gist notifications' },

docs/pages/documentation/auth/use-signout.md

@@ -2,7 +2,7 @@
 
 Remove logged in user and trigger a `SIGNED_OUT` event.
 
-```js highlight=4
+```tsx highlight=4
 import { useSignOut } from 'react-supabase'
 
 function Page() {

docs/pages/documentation/auth/use-signup.md

@@ -2,7 +2,7 @@
 
 Creates new user.
 
-```js highlight=4
+```tsx highlight=4
 import { useSignUp } from 'react-supabase'
 
 function Page() {
@@ -27,7 +27,7 @@ function Page() {
 
 During hook initialization:
 
-```js
+```tsx
 const [{ error, fetching, session, user }, signUp] = useSignUp({
   options: {
     redirectTo: 'https://example.com/dashboard',
@@ -37,7 +37,7 @@ const [{ error, fetching, session, user }, signUp] = useSignUp({
 
 Or execute function:
 
-```js
+```tsx
 const { error, session, user } = await signUp(
   {
     email: 'user@example.com',

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

@@ -2,7 +2,7 @@
 
 Performs DELETE on table.
 
-```js highlight=4
+```tsx highlight=4
 import { useDelete } from 'react-supabase'
 
 function Page() {
@@ -24,7 +24,7 @@ Throws error during execute if a filter is not passed during hook initialization
 
 During hook initialization:
 
-```js
+```tsx
 const [{ count, data, error, fetching }, execute] = useDelete('todos', {
   filter: (query) => query.eq('status', 'completed'),
   options: {
@@ -36,7 +36,7 @@ const [{ count, data, error, fetching }, execute] = useDelete('todos', {
 
 Or execute function:
 
-```js
+```tsx
 const { count, data, error } = await execute((query) => query.eq('id', id), {
   returning: 'minimal',
   count: 'estimated',

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

@@ -2,7 +2,7 @@
 
 Creates dynamic filter for using with other hooks.
 
-```js highlight=4,5,6,7,8,9,10,11
+```tsx highlight=4,5,6,7,8,9,10,11
 import { useFilter, useSelect } from 'react-supabase'
 
 function Page() {

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

@@ -2,7 +2,7 @@
 
 Performs INSERT into table.
 
-```js highlight=4
+```tsx highlight=4
 import { useInsert } from 'react-supabase'
 
 function Page() {
@@ -22,7 +22,7 @@ function Page() {
 
 During hook initialization:
 
-```js
+```tsx
 const [{ count, data, error, fetching }, execute] = useInsert('todos', {
   options: {
     returning: 'represenation',
@@ -33,7 +33,7 @@ const [{ count, data, error, fetching }, execute] = useInsert('todos', {
 
 Or execute function:
 
-```js
+```tsx
 const { count, data, error } = await execute(
   { name: 'Buy more cheese' },
   {

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

@@ -2,7 +2,7 @@
 
 Performs vertical filtering with SELECT.
 
-```js highlight=4
+```tsx highlight=4
 import { useSelect } from 'react-supabase'
 
 function Page() {
@@ -20,14 +20,15 @@ function Page() {
 
 During hook initialization:
 
-```js
+```tsx
 const [{ count, data, error, fetching }, reexecute] = useSelect('todos', {
   columns: 'id, name, description',
   filter: (query) => query.eq('status', 'completed'),
   options: {
     count: 'exact',
     head: false,
   },
+  pause: false,
 })
 ```
 
@@ -37,7 +38,7 @@ When using dynamic filters, you must make sure filters aren’t recreated every
 
 The easiest way to avoid this is to create dynamic filters with the [`useFilter`](/documentation/data/use-filter) hook:
 
-```js
+```tsx
 import { useState } from 'react'
 import { useFilter, useSelect } from 'react-supabase'
 
@@ -52,3 +53,33 @@ function Page() {
   return ...
 }
 ```
+
+## Pausing `useSelect`
+
+In some cases, we may want `useSelect` to execute when a pre-condition has been met, and not execute otherwise. For instance, we may be building a form and want validation to only take place when a field has been filled out.
+
+We can do this by setting the `pause` option to `true`:
+
+```tsx
+import { useState } from 'react'
+import { useFilter, useSelect } from 'react-supabase'
+
+function Page() {
+  const [username, setUsername] = useState(null)
+  const filter = useFilter((query) => query.eq('username', username), [
+    username,
+  ])
+  const [result, reexecute] = useSelect('users', {
+    filter,
+    pause: !username,
+  })
+
+  return (
+    <form>
+      <label>Enter a username</label>
+      <input onChange={(e) => setUsername(e.target.value)} />
+      {result.data && <div>Username is taken</div>}
+    </form>
+  )
+}
+```