Hooks

• Directorycomponents

  • DirectoryWidget

    • widgetHooks.ts
• Directorylib

  • usePagination.ts

Standard Hooks

usePagination

Assists with Table pagination.

usePagination.ts

usePagination({
  items,
  lastEvaluatedKey,
  currentPageIndex,
  pageSize = DEFAULT_PAGE_SIZE,
})

meHooks

Handles user auth and other queries related to the current user.

components/Me/meHooks.ts

export function useCurrentUserQuery({ redirectOnNotAuth = true } = {}) { ... }
export function useSignInMutation() { ... }
export function useSignUpMutation() { ... }
export function useSignOutMutation({ includeEmailQueryStringParam = false } = {}) { ... }
export function useMeQuery({ isAuthenticated = true } = {}) { ... }
export function useUpdateMeMutation() { ... }
export function useForgotPasswordMutation() { ... }
export function useResetPasswordMutation() { ... }
export function useVerifyAccountMutation() { ... }

Entity Hooks

Note

The *Hooks file isn’t technically a component, but it’s co-located within the ./components directory since it’s primarily used by the related Entity components.

Hooks are provided for querying the underlying REST API to retrieve and update the database state. To assist with remote state management, these hooks use TanStack Query Queries and Mutations.

useList*Query

Calls the List API and returns a list records.

components/Widget/widgetHooks.ts

({ lastEvaluatedKey }) => axios.get('/widgets', {
  params: {
    lastEvaluatedKey,
  },
})

// Related entities
({ widgetId, lastEvaluatedKey, filter }) => axios.get(`/widgets/${widgetId}/related-widgets`, {
  params: {
    lastEvaluatedKey,
  },
})

useSearch*Query

Calls the List API and returns a list of filtered records.

components/Widget/widgetHooks.ts

({ lastEvaluatedKey, filter }) => axios.get('/widgets', {
  params: {
    lastEvaluatedKey,
    filter,
  },
})

// Related entities
({ widgetId, lastEvaluatedKey, filter }) => axios.get(`/widgets/${widgetId}/related-widgets`, {
  params: {
    lastEvaluatedKey,
    filter,
  },
})

useGet*Query

Calls the Get API and returns an indvidual record.

components/Widget/widgetHooks.ts

({ widgetId }) => axios.get(`/widgets/${widgetId}`)

// Related entity
({ widgetId, relatedWidgetId }) => axios.get(`/widgets/${widgetId}/related-widgets/${relatedWidgetId}`)

useCreate*Mutation

Calls the Create API and creates a record.

components/Widget/widgetHooks.ts

({ data }) => axios.post('/widgets', { widget: data })

// Related entity
({ widgetId, data }) => axios.post(`/widgets/${widgetId}/related-widgets`, { relatedWidget: data })

useUpdate*Mutation

Calls the Update API and updates a record.

components/Widget/widgetHooks.ts

({ widgetId, data }) => axios.put(`/widgets/${widgetId}`, { widget: data })

// Related entity
({ widgetId, relatedWidgetId, data }) => axios.put(`/widgets/${widgetId}/related-widgets/${relatedWidgetId}`, { relatedWidget: data })

useDelete*Mutation

Calls the Delete API and deletes a record.

components/Widget/widgetHooks.ts

({ widgetId }) => axios.delete(`/widgets/${widgetId}`)

// Related entity
({ widgetId, relatedWidgetId }) => axios.delete(`/widgets/${widgetId}/related-widgets/${relatedWidgetId}`)