@query-command/react

This package contains React specific logic for actually using a store created from @query-command/core

Queries

This package exports a function createQueryHook which accepts a Store from @query-command/core.

It returns a React hook which can be used to query the state of your application.

An Example

const { data: user, loading } = useQuery({
  getState: (s) => s.users.get(id),
  query: {
    type: 'getUser',
    id
  }
})

This example gets a user by its id in the state.

If this user doesn't exist (is undefined), it will run the query which should fetch the data and correctly populate the store's state.

Then the getState function will re-run to correctly return the user.

Options

dependencies

By default, the query will be stored against a unique key which is re-generated whenever the values of the query action change.

In the example above, this would be the id of the user.

You can change this by passing in a list of dependencies instead.

shouldUpdate

By default, the query will be run if the value returned in the getState function is undefined.

You can change this behaviour to better match your state.

For example, for a string, its default might be "" so you could instead do

{
  shouldUpdate: (x) => x === ''
}

Commands

This package exports a function createCommandHook which accepts a Store from @query-command/core.

It returns a React hook which can be used to update the state of your application.

An Example

const dispatch = useCommand()

return (
  <button
    onClick={() => dispatch({ type: 'update', id: 'id', name: 'New name' })}
  >
    click
  </button>
)

This example updates the store's state on click of the button by dispatching the update command with the new name.

It might also peform the necessary fetch to the backend to save this change and handle rollbacks etc within the command handler (passed into the store).