@burnsred/query

Query

The Query interface is the main abstraction point.

It allows interfacing data storage/backing layers with data modification. E.g. Redux/API with Forms and Lists.

Each lower layer needs to provide its own verison of the useQuery hook.

Quick Start

import { useQuery } from "@burnsred/api";

function MyForm({ api, id }) {
  // Asks the API layer to ensure the data are available.
  const query = useQuery({ api, id });

  if (query.processing) return <Loading />;

  return (
    <Form {...query}>
      ...
    </Form>
  )
}

The props

useQuery:

• field: FieldType;

The EntityField for this record.

name: string;

• A dummy name; provided to remain compatible with the Form/Input interface.

value: T;

• the current (draft) value for this record.

reset: () => void;

• a callback to reset the draft to initial state.

errors: FieldErrorMap;

• any validation errors for this form.

onChange: ChangeEventHandler;

• a callback to update the draft (e.g. value).

onSubmit: FormEventHandler;

• a callback to save the draft. Should update the initialValue, and write to whatever backing store is in use.

pagination: boolean;

• if this is a list of records, are its results paginated?

processing: boolean;

• is the backing layer currently loading data?

processingDidFail: boolean;

• did the attempt to load data fail?

valueInitial: T;

• the current value as stored in the backing layer.