Docs
Coding conventions
Data fetching

Data fetching

  • Colocate your data fetching logic in a file suffixed with .resource. For example, user.resource.ts contains the data fetching logic for the User component.

  • Wherever possible, prefer abstracting your data fetching into a custom hook rather than fetching with effects (opens in a new tab). Fetching data with effects has many downsides (opens in a new tab) and should be avoided. Instead, prefer using SWR (opens in a new tab) hooks.

  • Use SWR (opens in a new tab) hooks to fetch data from the backend. Use useSWRImmutable (opens in a new tab) for resources that are not expected to change often, such as concepts or backend configurations.

  • Put the SWR hook in a resource file, and export it as a function. This allows us to reuse the same hook in multiple components.

  • Memoize the return value of your SWR hook using useMemo to prevent unnecessary rerenders. This is especially important if the hook is used in a component that is rendered many times, such as a table row.

  • Data fetching hooks should follow the naming convention use<resource>. For example, useUser is the hook for fetching user data.

  • Use openmrsFetch (opens in a new tab) to fetch data from the backend. openmrsFetch is a wrapper around the fetch API that adds authentication and authorization headers and handles errors. Pass it to SWR hooks as the fetcher argument.

  • Use the error, isLoading, isValidating and mutate properties of the SWR hook to handle errors, loading states and mutations. Don't recreate these properties manually.

  • Use SWR's conditional data fetching (opens in a new tab) pattern when the request depends on some condition. For example, if the request depends on a prop, only make the request if the prop is true.

    // Only fetch user data if userId is provided
    const url = userId ? `/ws/rest/v1/user/${userId}` : null;
    const { data, error, isLoading, isValidating, mutate } = useSWR<User>(url, openmrsFetch);