Skip to main content

useController()

Controller provides type-safe methods to access and dispatch actions to the store.

For instance fetch, invalidate, and setResponse

import { useController } from '@data-client/react';

function MyComponent({ id }) {
  const ctrl = useController();

  const handleRefresh = useCallback(
    async e => {
      await ctrl.fetch(MyResource.get, { id });
    },
    [fetch, id],
  );

  const handleSuspend = useCallback(
    async e => {
      await ctrl.invalidate(MyResource.get, { id });
    },
    [invalidate, id],
  );

  const handleLogout = useCallback(
    async e => {
      ctrl.resetEntireStore();
    },
    [resetEntireStore],
  );
}

Examples​

Using the resolution​

controller.fetch() matches the return type useSuspense() - utilizing the Endpoint.schema when possible. This allows us to use any class members.

import { useController } from '@data-client/react';

const post = await controller.fetch(PostResource.getList.push, createPayload);
post.title;
post.computedField
post.pk();

Todo App​

More Demos