Module: hooks

Other

ApiFormReturnType

Ƭ ApiFormReturnType<FormData>: Object

Type parameters

Name	Type
FormData	extends FieldValues = FieldValues

Type declaration

Name	Type	Description
form	UseFormReturn<FormData, object>	Value returned from react-hook-form's useForm hook. Check official docs for more details.
formState	{ isSubmitSuccessful: boolean }	-
formState.isSubmitSuccessful	boolean	-
genericError?	string	A value set with setGenericError. It can be also populated with setApolloGraphQLResponseErrors when a non-field error is found.
handleSubmit	UseFormHandleSubmit<FormData>	A wrapper function around form.handleSubmit
hasGenericErrorOnly	boolean	-
setApolloGraphQLResponseErrors	(errors: ReadonlyArray<GraphQLError>) => void	A function that processes GraphQL errors and uses form.setError and setGenericError to populate proper errors in react-hook-form context.
setGenericError	(genericError: string | undefined) => void	-

Defined in

packages/webapp-libs/webapp-api-client/src/hooks/useApiForm/useApiForm.types.ts:28

---

UseApiFormArgs

Ƭ UseApiFormArgs<FormData>: UseFormProps<FormData> & { errorMessages?: ErrorMessages<FormData> }

This type is an extension of UseFormProps from react-hook-form; it adds a definition for translations of error messages' codes returned from backend.

Type parameters

Name	Type
FormData	extends FieldValues = FieldValues

Defined in

packages/webapp-libs/webapp-api-client/src/hooks/useApiForm/useApiForm.types.ts:19

---

usePaginatedQuery

▸ usePaginatedQuery<T>(query, options): Object

An usePaginatedQuery is a hook that allows you to retrieve data with ready-made logic for cursor-based bidirectional pagination. Underneath, it uses useQuery function exported by @apollo/client.

Type parameters

Name	Type
T	extends TypedDocumentNode<{ [key: string]: any; }, { [key: string]: any; }>

Parameters

Name	Type
query	T
options	Object
options.dataKey	keyof ExtractGeneric<T>
options.hookOptions?	QueryHookOptions<ExtractGeneric<T>, Exact<{ after?: InputMaybe<string> ; before?: InputMaybe<string> ; first?: InputMaybe<number> ; last?: InputMaybe<number> }>>

Returns

Object

Name	Type
data	undefined | ExtractGeneric<T>
hasNext	boolean
hasPrevious	boolean
loadNext	() => void
loadPrevious	() => void
loading	boolean

Example

import { usePaginatedQuery } from '@shipfast/webapp-api-client/hooks';
import { Pagination } from '@shipfast/webapp-core/components/pagination';

const ITEMS_PER_PAGE = 8;

const CrudDemoList = () => {
  const { data, loading, hasNext, hasPrevious, loadNext, loadPrevious } =
    usePaginatedQuery(crudDemoItemListQuery, {
      hookOptions: {
        variables: {
          first: ITEMS_PER_PAGE,
        },
      },
      dataKey: 'allCrudDemoItems',
    });

  return (
    <Pagination
      hasNext={hasNext}
      hasPrevious={hasPrevious}
      loadNext={loadNext}
      loadPrevious={loadPrevious}
    />
  );
};

Defined in

packages/webapp-libs/webapp-api-client/src/hooks/usePaginatedQuery/usePaginatedQuery.hook.ts:50

hook

useApiForm

▸ useApiForm<FormData>(args?): ApiFormReturnType<FormData>

A wrapper hook around a useForm hook from react-hook-form library.

In addition to full react-hook-form functionality it is able to transform GraphQL validation errors returned from backend into proper field errors.

Read more about working with this library in official react-hook-form documentation.

Type parameters

Name	Type
FormData	extends FieldValues = FieldValues

Parameters

Name	Type	Description
args?	UseApiFormArgs<FormData>	An extension of react-hook-form UseFormProps

Returns

ApiFormReturnType<FormData>

Example

You can pass errors from GraphQL response to automatically populate react-hook-form errors.

const { setApolloGraphQLResponseErrors } = useApiForm<LoginFormFields>();

const [commitLoginMutation] = useMutation(authSignInMutation, {
  onError: (error) => {
    setApolloGraphQLResponseErrors(error.graphQLErrors);
  },
});

const handleLogin = handleSubmit(async (data: LoginFormFields) => {
  const { errors } = await commitLoginMutation({
    variables: {
      input: data,
    },
  });
  if (errors) {
    setApolloGraphQLResponseErrors(errors);
  }
});

Example

You can pass custom label for generic non-field errors.

const { genericError } = useApiForm<LoginFormFields>({
  errorMessages: {
    nonFieldErrors: {
      no_active_account: intl.formatMessage({
        defaultMessage: 'Incorrect authentication credentials.',
        id: 'Login form / error / no active account',
      }),
      authentication_failed: intl.formatMessage({
        defaultMessage: 'Incorrect authentication credentials.',
        id: 'Login form / error / authentication failed',
      }),
    },
  },
});

console.log(genericError);

Defined in

packages/webapp-libs/webapp-api-client/src/hooks/useApiForm/useApiForm.hook.ts:75