Wraps the @based/client into react hooks
import { useQuery, useClient, useAuthState, Provider } from '@based/react'
import based from '@based/client'
// Create client
const client = based({
env: 'myEnv',
org: 'myOrg',
project: 'myProject',
})
export const Authenticate = ({ children }) => {
// Observes id a user is authenticated
const authState = useAuthState()
// Returns the based client from the provider
const client = useClient()
if (authState.token) {
// When authenticated render the app
return children
}
return <button onClick={() => {
// Authenticate and use localStorage
await client.setAuthState({
token: 'my-token',
persistent: true,
})
}} />
}
export const Something = () => {
// Subscribes to data
const { data, error, loading } = useQuery('db', {
children: { $list: true, id: true, name: true },
})
return <div>{loading ? 'loading...' : data.children.map(
{ id, name } => <p onClick={() => {
client.call('db:delete', { id })
}} key={id}>{name}</p>)
}</div>
}
export const App = () => {
return <Provider client={client}>
<Authenticate><Something /></Authenticate>
</Provider>
}Subscribes when a component gets mounted / unsubscribes when a comment gets unmounted. Query hooks are automaticly cached and share remote active subscriptions.
import { useQuery } from '@based/react'
export const Something = () => {
const { data, error, loading } = useQuery('someQueryFunction')
if (error) {
return error.message
}
return <div>{loading ? 'loading...' : data.text}</div>
}The persistent option will store the cached result of a query in localStorage.
const { data: userInfo } = useQuery(
'someUserInfo',
{
id: client.authState.userId,
},
{ persistent: true }
)useQuery allows passing a null value to the function name - this is usefull when you have a query depending on other data
const { data: userInfo } = useQuery('someUserInfo', {
id: client.authState.userId,
})
const { data } = useQuery(
userInfo.preferedLanguage ? 'someQueryFunction' : null,
{
preferedLanguage: userInfo.preferedLanguage,
}
)Returns the based client from the Provider
import { useClient, Provider } from '@based/react'
import based from '@based/client'
// Create client
const client = based({
env: 'myEnv',
org: 'myOrg',
project: 'myProject',
})
export const Something = () => {
const client = useClient()
useEffect(() => {
client.call('domSomething')
}, [])
}
export const App = () => {
return (
<Provider client={client}>
<Something />
</Provider>
)
}Observes the connected state of the based client.
import { useConnected } from '@based/react'
export const Something = () => {
const isConnected = useConnected()
if (isConnected) {
return 'connected!'
}
return 'not connected :('
}Observes if any active useQuery hook is loading.
import { useLoading } from '@based/react'
export const Something = () => {
const isLoading = useLoading()
if (isLoading) {
return 'some data is loading'
}
return 'everything is loaded'
}Observe if a client is authenticated.
import { useAuthState } from '@based/react'
export const Something = () => {
const authState = useAuthState()
if (authState.token) {
return `User ${authState.userId} is authenticated`
}
if (authState.error) {
console.log('An error authenticating', authState.error)
}
return 'not authenticated'
}