Forem: Taras Protchenko

React Query Request Factory: Reusable Type-Safe Hooks with Axios & FSD

Taras Protchenko — Mon, 05 May 2025 10:21:30 +0000

In the modern world of frontend development, optimizing data handling is the key to creating responsive and scalable applications. Using libraries for asynchronous requests, such as @tanstack/react-query and axios, provides a convenient system for working with REST APIs, tRPC, or GraphQL.

When developing applications, we often need to perform the same actions for different API entities: get a list of items, retrieve a single item by ID, create a new item, as well as perform updates and deletions. These operations are called CRUD (Create, Read, Update, Delete).

I will show how to implement universal CRUD hooks using the aforementioned libraries in a functional style based on the factory pattern. Instead of duplicating code for each entity, we can generate hooks, which significantly reduces the amount of copy-paste code and makes it more flexible and reusable. This approach is easily scalable, universal, and applicable to any API.

You can read this article on my blog or continue reading here.

@tanstack/react-query and axios

@tanstack/react-query — formerly known as react-query, is a library for managing the state of requests, caching data, and syncing it with the server. It significantly improves performance and simplifies working with asynchronous requests by abstracting API logic away from the data rendering logic in React components.
axios is a popular library for making HTTP requests. It is known for its flexibility and ease of use, including when working with asynchronous operations.

Our goal is to create a function that will automatically generate CRUD hooks for any entity, saving us from having to write the same code over and over. For example, if we need to fetch users, posts, or comments, we do not want to repeat the same boilerplate code for each entity.

Implementing CRUD Hooks in Functional Style

Let's proceed with the implementation. We will create a function createCrudHooks that returns a set of CRUD hooks for any given entity.

Step 1: Connect the necessary libraries

For handling queries and caching, install @tanstack/react-query and axios (after switching to your project directory):

cd ./my-awesome-project
npm i axios react-query

Step 2: Create the main function

Now create the createCRUDHooks function, which takes a base URL and an entity name (for example, users or posts). The function will return a set of hooks for performing CRUD operations.

import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'

import axios, { AxiosResponse } from 'axios'

const createCrudHooks = <T>(baseUrl: string, entity: string) => {
  const api = axios.create({
    baseURL: baseUrl,
  })

  // Fetch All (GET)
  const useFetchAll = (queryKey: string) => {
    return useQuery<T[]>(queryKey, async () => {
      const response: AxiosResponse<T[]> = await api.get(`/${entity}`)
      return response.data
    })
  }

  // Fetch One by ID (GET)
  const useFetchOne = (queryKey: string, id: string | number) => {
    return useQuery<T>([queryKey, id], async () => {
      const response: AxiosResponse<T> = await api.get(`/${entity}/${id}`)
      return response.data
    })
  }

  // Create (POST)
  const useCreate = () => {
    const queryClient = useQueryClient()

    return useMutation(
      async (data: Partial<T>) => {
        const response: AxiosResponse<T> = await api.post(`/${entity}`, data)
        return response.data
      },
      {
        onSuccess: () => {
          queryClient.invalidateQueries(entity)
        },
      }
    )
  }

  // Update (PUT)
  const useUpdate = () => {
    const queryClient = useQueryClient()

    return useMutation(
      async ({ id, data }: { id: string | number; data: Partial<T> }) => {
        const response: AxiosResponse<T> = await api.put(
          `/${entity}/${id}`,
          data
        )
        return response.data
      },
      {
        onSuccess: () => {
          queryClient.invalidateQueries(entity)
        },
      }
    )
  }

  // Delete (DELETE)
  const useDelete = () => {
    const queryClient = useQueryClient()

    return useMutation(
      async (id: string | number) => {
        const response: AxiosResponse<void> = await api.delete(
          `/${entity}/${id}`
        )
        return response.data
      },
      {
        onSuccess: () => {
          queryClient.invalidateQueries(entity)
        },
      }
    )
  }

  return {
    useFetchAll,
    useFetchOne,
    useCreate,
    useUpdate,
    useDelete
  }
}

You can read more about type-safe usage with @tanstack/react-query in the article Type-safe React Query.

Let's examine in more detail what hooks the createCrudHooks function returns:

Hook useFetchAll

This hook sends a GET request to retrieve a list of items for a given entity (for example, a list of users), and uses the useQuery hook from the @tanstack/react-query library for caching and tracking the state of the request. It returns an array of items that can be used in any React component for rendering or further manipulation. The function can be extended to pass additional query parameters, for example, to filter results.

Hook useFetchOne

This hook retrieves a single item by its ID (unique identifier). It also uses useQuery, but takes a second argument — the item’s ID. This allows you to get data for a specific entity item.

Hook useCreate

This hook is used to create new items. It issues a POST request to the API and, after successfully creating an item, calls invalidateQueries to refresh the cache, automatically reloading data in other components where our hooks are used.

Hook useUpdate

A PUT request is used to update an item. The hook takes an object containing the item’s ID and the data to update. After a successful update, the data cache is refreshed as well.

Hook useDelete

This hook deletes an item by its ID using a DELETE request and updates the data cache after deletion.

Step 3: Tests

Let's add tests to ensure our code works correctly and without errors.

First, set up the test environment with the following libraries:

@testing-library/react — for testing React components.
@testing-library/jest-dom — provides additional matchers for assertions (for example, toBeInTheDocument).
vitest — a test runner and framework for writing tests.
axios-mock-adapter — for mocking requests via axios.

npm i @testing-library/react @testing-library/jest-dom vitest axios-mock-adapter -D

To run the tests, add the following script to package.json:

"scripts": {
  "test": "vitest"
}

Now you can run the tests:

npm run test

Let's create a test file, for example crudHooks.test.tsx:

import { QueryClient, QueryClientProvider } from 'react-query'
import { act, renderHook } from '@testing-library/react'
import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'
// Your hooks
import { createCrudHooks } from './crudHooks'

const mock = new MockAdapter(axios)

const createTestQueryClient = () => {
  return new QueryClient({
    defaultOptions: {
      queries: {
        retry: false,
      },
    },
  })
}

const wrapper = ({ children }: { children: React.ReactNode }) => {
  const queryClient = createTestQueryClient()
  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  )
}

interface User {
  id: number
  name: string
  email: string
}

// Create hooks for user entity
const { useFetchAll, useFetchOne, useCreate, useUpdate, useDelete } =
  createCrudHooks<User>('https://api.example.io', 'users')

beforeEach(() => {
  mock.reset()
})

describe('CRUD Hooks', () => {
  it('should fetch all users successfully', async () => {
    const mockData = [
      { id: 1, name: 'Ivan Green', email: 'ivan@example.io' },
      { id: 2, name: 'Inna Green', email: 'inna@example.io' },
    ]

    mock.onGet('/users').reply(200, mockData)

    const { result, waitFor } = renderHook(() => useFetchAll('users'), {
      wrapper,
    })

    await waitFor(() => result.current.isSuccess)

    expect(result.current.data).toEqual(mockData)
  })

  it('should fetch one user by ID', async () => {
    const mockUser = { id: 1, name: 'Ivan Green', email: 'ivan@example.io' }

    mock.onGet('/users/1').reply(200, mockUser)

    const { result, waitFor } = renderHook(() => useFetchOne('users', 1), {
      wrapper,
    })

    await waitFor(() => result.current.isSuccess)

    expect(result.current.data).toEqual(mockUser)
  })

  it('should create a new user', async () => {
    const newUser = { id: 3, name: 'Sam Smith', email: 'sam@example.io' }

    mock.onPost('/users').reply(201, newUser)

    const { result, waitFor } = renderHook(() => useCreate(), { wrapper })

    act(() => {
      result.current.mutate({ name: 'Sam Smith', email: 'sam@example.io' })
    })

    await waitFor(() => result.current.isSuccess)

    expect(result.current.data).toEqual(newUser)
  })

  it('should update a user', async () => {
    const updatedUser = {
      id: 1,
      name: 'Ivan Updated',
      email: 'ivan.updated@example.io',
    }

    mock.onPut('/users/1').reply(200, updatedUser)

    const { result, waitFor } = renderHook(() => useUpdate(), { wrapper })

    act(() => {
      result.current.mutate({
        id: 1,
        data: { name: 'Ivan Updated', email: 'Ivan.updated@example.io' },
      })
    })

    await waitFor(() => result.current.isSuccess)

    expect(result.current.data).toEqual(updatedUser)
  })

  it('should delete a user', async () => {
    mock.onDelete('/users/1').reply(200)

    const { result, waitFor } = renderHook(() => useDelete(), { wrapper })

    act(() => {
      result.current.mutate(1)
    })

    await waitFor(() => result.current.isSuccess)

    expect(result.current.isSuccess).toBe(true)
  })
})

We have created tests for our CRUD hook set using react-testing-library, axios-mock-adapter, and vitest. This makes our code reliable and well-tested, which is important for developing scalable and maintainable applications. Testing asynchronous operations becomes much easier thanks to request mocking and tools for working with hooks.

Example usage in a React component

Now that we have created universal hooks, let's see how to use them in a real component:

interface User {
  id: number
  name: string
  email: string
}

// Can be moved to a separate file for reuse
const { useFetchAll, useCreate, useUpdate, useDelete } = createCrudHooks<User>(
  'https://api.example.io',
  'users'
)

type UserProps = {
  user: User
}

const UserItem = ({ user }: UserProps) => {
  const { mutate: updateUser } = useUpdate()
  const { mutate: deleteUser } = useDelete()

  const handleUpdate = () => {
    updateUser({ id: user.id, data: { name: 'Ivan' } })
  }

  const handleDelete = () => {
    deleteUser(user.id)
  }

  return (
    <li key={user.id}>
      {user.name} - {user.email}
      <button onClick={handleUpdate}>Update name</button>
      <button onClick={handleDelete}>Delete</button>
    </li>
  )
}

export const Users = () => {
  const { data: users, isLoading } = useFetchAll('users')
  const { mutate: createUser } = useCreate()

  const handleCreateUser = () => {
    createUser({ name: 'Darya', email: 'darya@example.io' })
  }

  if (isLoading) return <div>Loading users...</div>

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users?.map((user: User) => (
          <UserItem key={user.id} user={user} />
        ))}
      </ul>
      <button onClick={handleCreateUser}>Create user</button>
    </div>
  )
}

What’s wrong with this approach?

When using wrappers for hooks, you can encounter typing issues as described in this GitHub discussion. One option is to use query factories, which we will consider next. You can write your own factory or use the library Query Key Factory.

Example of using a query factory in an application built on Feature-Sliced Design (FSD) principles

As a project scales, it becomes important to ensure its modularity and organization. One architectural approach is Feature-Sliced Design (FSD), which helps organize an application by functionality, delineating layers of responsibility. Let's consider how to apply FSD to a project that uses @tanstack/react-query.

What is Feature-Sliced Design?

FSD (Feature-Sliced Design) is an architectural approach in which an application is divided into independent modules (features) based on functionality. The main goal is to improve scalability, maintainability, and readability of the project. FSD helps avoid uncontrolled growth of the codebase and simplifies testing.

FSD Levels

App: Global configurations, routing, and providers.
Pages: Full pages or large parts of a page for nested routing.
Widgets: Large self-contained pieces of functionality or interface, usually implementing an entire user scenario.
Features: Reusable implementations of whole features of the product, i.e., actions that deliver business value to the user.
Entities: Basic business logic objects, such as users, orders, and products.
Shared: Common modules, such as UI components, utilities, and API helpers.

Query factory and FSD

Now let's look at a project architecture using the query factory and the FSD approach.

Project structure:

src/
├── app/                   // Global configurations, routing, and providers
├── entities/              // Entities
│   └── pokemon/
│       ├── api/
│       ├── model/
│       └── ui/
├── features/              // Features
├── widgets/               // Widgets
├── pages/                 // Pages (PokemonsPage for example)
└── shared/                // Common modules, such as UI components, utilities..

Shared (Common resources)

Shared includes common components, utilities, configurations, and general API helpers. Let's write a createQueries function, which will serve as a query factory; let's assume we are using a simple CRUD API to communicate with the server:

import { keepPreviousData, queryOptions } from '@tanstack/react-query';
import * as qs from 'qs';
import { createQueryFn } from '../../api/createQueryFn';
import { createMutationFn } from '../../api/createMutationFn';
import { createDeleteMutationFn } from '../../api/createDeleteMutationFn';
import { createUpdateMutationFn } from '../../api/createUpdateMutationFn';

// We pass generics so that when we write code later, the types are displayed correctly.
export const createQueries = <
  CreateResponse,
  CreateBody,
  ReadResponse,
  ReadOneResponse,
  UpdateResponse,
  UpdateBody,
  DeleteResponse,
  DeleteParams
>(
  entity: string
) => ({
  all: () =>
    queryOptions({
      queryKey: [entity],
    }),
  create: () => ({
    mutationKey: [entity],
    mutationFn: (body: CreateBody) =>
      createMutationFn<CreateResponse, CreateBody>({
        path: `/${entity}`,
        body,
      }),
    placeholderData: keepPreviousData,
  }),
  read: (filters) =>
    queryOptions({
      queryKey: [entity, filters],
      queryFn: () =>
        createQueryFn<ReadResponse>({
          path: `/${entity}?${qs.stringify(filters)}`,
        }),
      placeholderData: keepPreviousData,
    }),
  readOne: ({ id }) =>
    queryOptions({
      queryKey: [entity, id],
      queryFn: () =>
        createQueryFn<ReadOneResponse>({
          path: `/${entity}/${id}`,
        }),
      placeholderData: keepPreviousData,
    }),
  update: () => ({
    mutationKey: [entity],
    mutationFn: ({ id, body }) =>
      createUpdateMutationFn<UpdateResponse, UpdateBody>({
        path: `/${entity}/${id}`,
        body,
      }),
    placeholderData: keepPreviousData,
  }),
  delete: () => ({
    mutationKey: [entity],
    mutationFn: (params: DeleteParams) =>
      createDeleteMutationFn<DeleteResponse>({
        path: `/${entity}/${params.id}`,
      }),
    placeholderData: keepPreviousData,
  }),
});

This function returns an object with query configurations for basic CRUD operations.

Let's create a test file createQueries.test.ts:

import { describe, it, expect, vi } from 'vitest';
import { createQueries } from './createQueries.ts';
import * as api from '../../api/createQueryFn';
import * as mutationApi from '../../api/createMutationFn';

vi.mock('../../api/createQueryFn', () => ({
  createQueryFn: vi.fn(),
}));

vi.mock('../../api/createMutationFn', () => ({
  createMutationFn: vi.fn(),
}));

vi.mock('../../api/createDeleteMutationFn', () => ({
  createDeleteMutationFn: vi.fn(),
}));

vi.mock('../../api/createUpdateMutationFn', () => ({
  createUpdateMutationFn: vi.fn(),
}));

describe('createQueries', () => {
  const entity = 'user';

  it('should return correct query options for "all"', () => {
    const queries = createQueries(entity);
    const result = queries.all();

    expect(result.queryKey).toEqual([entity]);
  });

  it('should create mutation for "create"', () => {
    const queries = createQueries(entity);
    const body = { name: 'Alexander' };

    queries.create().mutationFn(body);

    expect(mutationApi.createMutationFn).toHaveBeenCalledWith({
      path: `/${entity}`,
      body,
    });
  });

  it('should return correct query options for "read"', () => {
    const queries = createQueries(entity);
    const filters = { page: 1 };

    queries.read(filters).queryFn();

    expect(api.createQueryFn).toHaveBeenCalledWith({
      path: `/${entity}?page=1`,
    });
  });

  it('should return correct query options for "readOne"', () => {
    const queries = createQueries(entity);
    const id = 123;

    queries.readOne({ id }).queryFn();

    expect(api.createQueryFn).toHaveBeenCalledWith({
      path: `/${entity}/${id}`,
    });
  });

  it('should create mutation for "update"', () => {
    const queries = createQueries(entity);
    const id = 123;
    const body = { name: 'Updated' };

    queries.update().mutationFn({ id, body });

    expect(mutationApi.createUpdateMutationFn).toHaveBeenCalledWith({
      path: `/${entity}/${id}`,
      body,
    });
  });

  it('should create mutation for "delete"', () => {
    const queries = createQueries(entity);
    const params = { id: 123 };

    queries.delete().mutationFn(params);

    expect(mutationApi.createDeleteMutationFn).toHaveBeenCalledWith({
      path: `/${entity}/${params.id}`,
    });
  });
});

Now our function is tested 😉

Entities

Entities are the main domain objects that the application works with, for example, User or Pokemon. Each entity has its own module, which includes data type definitions, CRUD hooks, UI components for display, and possibly adapters for interacting with the API.

Example structure of the Pokemon entity:

src/
└── entities/
    └── pokemon/
        ├── api/
        │   ├── pokemon.query.ts      // Pokemon Queries
        │   ├── usePokemon.tsx        // Hook for getting one Pokemon
        │   ├── usePokemonCreate.tsx  // Hook for Pokemon creation
        │   ├── usePokemonDelete.tsx  // Hook for Pokemon deletion
        │   ├── usePokemonList.tsx    // Hook for getting Pokemon list
        │   └── usePokemonUpdate.tsx  // Hook for Pokemon update
        └── model/
            └── Pokemon.ts            // Types for Pokemon entity
        └── ui/
            ├── PokemonList.tsx       // React component for Pokemon list
            └── PokemonCard.tsx       // React component for Pokemon card

api/usePokemon*.ts: CRUD hook implementations for the Pokemon API.
model/Pokemon.ts: Data type definitions for the Pokemon entity.
ui/PokemonList.tsx and ui/PokemonCard.tsx: UI components for the Pokemon entity (displaying a list of Pokemon and an individual Pokemon).

Example pokemon.query.ts using createQueries:

import { createQueries } from '../../../shared/lib/createQueries/createQueries';
import {
  CreatePokemonResponse,
  CreatePokemonBody,
  ReadPokemonResponse,
  ReadOnePokemonResponse,
  UpdatePokemonResponse,
  UpdatePokemonBody,
  DeletePokemonResponse,
  DeletePokemonParams,
} from '../model/Pokemon';

export const pokemonQueries = createQueries<
  CreatePokemonResponse,
  CreatePokemonBody,
  ReadPokemonResponse,
  ReadOnePokemonResponse,
  UpdatePokemonResponse,
  UpdatePokemonBody,
  DeletePokemonResponse,
  DeletePokemonParams
>('pokemon');

In createQueries, we pass the types required for proper typing and the entity name according to the backend contract. We then use pokemonQueries to create the necessary CRUD hooks, as shown with usePokemonList:

import { useQuery } from '@tanstack/react-query';
import { pokemonQueries } from './pokemon.query';

type Props = {
  limit: number;
  offset: number;
};

export const usePokemonList = ({ limit, offset }: Props) => {
  return useQuery({
    ...pokemonQueries.read({ limit, offset }),
  });
};

We obtain all the CRUD hooks needed for the application, which can be used in UI components or other layers of the app. This makes the code structure more encapsulated and adapted to FSD.

Depending on the agreements in your project, you could write a factory for CRUD hooks, or just manually create only those you need, as we did.

Features

Features represent specific user actions that deliver business value. For example, editing or creating a new Pokemon. These features can use entities and wrap them in additional business rules, if necessary.

Example structure of the create-pokemon feature:

src/
└── features/
    └── create-pokemon/
        ├── model/
        └── ui/

model/: May contain a hook or function for creating a Pokemon (for example, using usePokemonCreate from entities/pokemon/api).
ui/: Components that render the add Pokemon form or UI for confirmation of the addition.

import { usePokemonCreate } from
'../../../entities/pokemon/api/usePokemonCreate';
import { CreatePokemonBody } from '../../../entities/pokemon/model/Pokemon';

type Props = {
  pokemon: CreatePokemonBody;
};

export const CreatePokemon = ({ pokemon }: Props) => {
  const { mutate: createPokemon } = usePokemonCreate();

  const handleCreate = () => {
    createPokemon({
      name: pokemon.name,
    });
  };

  return (
    <button
      onClick={handleCreate}
      className="bg-green-500 text-white p-2 rounded hover:bg-green-600 transition-colors"
    >
      Create {pokemon.name}
    </button>
  );
};

Using the component:

<CreatePokemon pokemon={{ name: 'Pikachu' }} />

Widgets

Widgets are larger UI modules that can consist of multiple features and entities. For example, a PokemonProfile widget might include a list of all series and games the Pokemon has appeared in, information about its profile, etc.

You can find a more detailed example of this approach in the demo project.

Conclusions

We have implemented a flexible and reusable CRUD hook system using @tanstack/react-query and axios. Now you can easily use these hooks for any entity in your API, significantly simplifying your code and improving readability.

This approach helps to scale the application easily and minimize code duplication. Applying FSD principles helps structure the project, making it more scalable and maintainable. Combining these approaches allows you to create flexible applications where modularity and component independence make the project easy to support and expand.

Try incorporating this approach into your project, and you will quickly notice how it simplifies managing request state and integrating it into React components.

Interesting links:

Demo with Pokemons.
ReactQueryKit.
Query factories in @tanstack/react-query.
The FSD guide includes an example of a query factory implementation.

Dynamic micro frontends with Nx and React

Taras Protchenko — Mon, 22 Aug 2022 17:45:13 +0000

When there are a lot of teams on the project, when dynamic frontend expansion is necessary, and when a rebuild of the entire project is not an option, the concept of Micro Frontends comes into play in conjunction with Dynamic Module Federation.

Nx has a great tutorial for angular stack on this topic. Let's try to implement this concept for react stack.

The Nx documentation says:

Nx is a smart, fast and extensible build system with first class monorepo support and powerful integrations.

Now we will check it in practice, we will generate several applications and a helper library.

Create Nx workspace

To create Nx workspace, run the command:

npx create-nx-workspace@latest

Choose a name and type (apps), Nx Cloud can be left unconnected.

Generation of host-app and children apps

Install @nrwl/react plugin as dev dependency. It provides handy generators and utilities that make it easy to manage React apps and libraries inside the Nx workspace.

npm install -D @nrwl/react

Create host-app and micro frontends:

npx nx g @nrwl/react:host host --remotes=cart,blog,shop

Select the styling settings you need in applications and wait for the end of the generation.

Creating a library for easy registration and import of micro frontends

To import micro frontends dynamically by URL, we need to create a library that will help with this. To do this, we will generate a library using the @nrwl/js generator and call it load-remote-module.

npx nx g @nrwl/js:library load-remote-module

Let's add the code to the freshly generated library /libs/load-remote-module/src/lib/load-remote-module.ts:

export type ResolveRemoteUrlFunction = (
  remoteName: string
) => string | Promise<string>;

declare const __webpack_init_sharing__: (scope: 'default') => Promise<void>;
declare const __webpack_share_scopes__: { default: unknown };

let resolveRemoteUrl: ResolveRemoteUrlFunction;

export function setRemoteUrlResolver(
  _resolveRemoteUrl: ResolveRemoteUrlFunction
) {
  resolveRemoteUrl = _resolveRemoteUrl;
}

let remoteUrlDefinitions: Record<string, string>;

export function setRemoteDefinitions(definitions: Record<string, string>) {
  remoteUrlDefinitions = definitions;
}

let remoteModuleMap = new Map<string, unknown>();
let remoteContainerMap = new Map<string, unknown>();

export async function loadRemoteModule(remoteName: string, moduleName: string) {
  const remoteModuleKey = `${remoteName}:${moduleName}`;
  if (remoteModuleMap.has(remoteModuleKey)) {
    return remoteModuleMap.get(remoteModuleKey);
  }

  const container = remoteContainerMap.has(remoteName)
    ? remoteContainerMap.get(remoteName)
    : await loadRemoteContainer(remoteName);

  const factory = await container.get(moduleName);
  const Module = factory();

  remoteModuleMap.set(remoteModuleKey, Module);

  return Module;
}

function loadModule(url: string) {
  return import(/* webpackIgnore:true */ url);
}

let initialSharingScopeCreated = false;

async function loadRemoteContainer(remoteName: string) {
  if (!resolveRemoteUrl && !remoteUrlDefinitions) {
    throw new Error(
      'Call setRemoteDefinitions or setRemoteUrlResolver to allow Dynamic Federation to find the remote apps correctly.'
    );
  }

  if (!initialSharingScopeCreated) {
    initialSharingScopeCreated = true;
    await __webpack_init_sharing__('default');
  }

  const remoteUrl = remoteUrlDefinitions
    ? remoteUrlDefinitions[remoteName]
    : await resolveRemoteUrl(remoteName);

  const containerUrl = `${remoteUrl}${
    remoteUrl.endsWith('/') ? '' : '/'
  }remoteEntry.js`;

  const container = await loadModule(containerUrl);
  await container.init(__webpack_share_scopes__.default);

  remoteContainerMap.set(remoteName, container);
  return container;
}

This code is based on code from the Nx plugin for angular.

const withModuleFederation = require('@nrwl/react/module-federation');
const moduleFederationConfig = require('./module-federation.config');

const coreLibraries = new Set([
  'react',
  'react-dom',
  'react-router-dom',
  '@microfrontends/load-remote-module',
]);

module.exports = withModuleFederation({
  ...moduleFederationConfig,
  shared: (libraryName, defaultConfig) => {
    if (coreLibraries.has(libraryName)) {
      return {
        ...defaultConfig,
        eager: true,
      };
    }

    // Returning false means the library is not shared.
    return false;
  },
});

Registration is required to avoid the error: Uncaught Error: Shared module is not available for eager consumption.

Configuration and Connecting micro frontends

Let's save a list of links to our micro frontends in JSON file format - this is one of the easiest methods to get them at runtime, on the host-app side, all that remains is to make a GET request. In the future, we may use the server API for this purpose.

Create a file module-federation.manifest.json in folder /apps/host/src/assets/module-federation.manifest.json:

{
  "cart": "http://localhost:4201",
  "blog": "http://localhost:4202",
  "shop": "http://localhost:4203"
}

Open /apps/host/src/main.ts and change for:

import { setRemoteDefinitions } from '@microfrontends/load-remote-module';
import('./bootstrap');

fetch('/assets/module-federation.manifest.json')
  .then((res) => res.json())
  .then((definitions) => setRemoteDefinitions(definitions))
  .then(() => import('./bootstrap').catch((err) => console.error(err)));

As you can see, we:

Fetch JSON file
Call setRemoteDefinitions with its contents
This allows webpack to understand where our micro frontends are deployed

Change the method of loading micro frontends in the host-app to dynamic

At the moment, webpack determines where the micro frontends are located during the build step, as it is specified in the /apps/host/module-federation.config.js config file.

Open module-federation.config.js, which is located in our host-app folder /apps/host/module-federation.config.js, and set the value of remotes to an empty array so that webpack does not look for modules when building. It will look like this:

module.exports = {
  name: 'host',
  remotes: [],
};

Next, we need to change the way micro frontends are loaded in our host-app. Open the file /apps/host/src/app/app.tsx and replace the import code with:

import { loadRemoteModule } from '@microfrontends/load-remote-module';

const Cart = React.lazy(() => loadRemoteModule('cart', './Module'));

const Blog = React.lazy(() => loadRemoteModule('blog', './Module'));

const Shop = React.lazy(() => loadRemoteModule('shop', './Module'));

That's all it takes to replace Static Module Federation to Dynamic Module Federation.

Serve and check

To serve our host-app and micro frontends:

npm run start

Or the parallel start of all apps:

nx run-many --parallel --target=serve --projects=host,cart,blog,shop --maxParallel=100

Open localhost:4200 and see, what our micro frontends Dynamic Module Federation is working:

config is fetching from module-federation.manifest.json via GET request
if you remove one of the applications from it, then we will get an error in the browser
we can add additional micro frontends

GitHub repository - dynamic-micro-frontends-with-Nx-and-react.

Additional info:

Big thanks to ScorIL for the help with the load-remote-module library.