Best practices for developing a reusable RTK Query API package

Other Questions NPM
1

I’m working on a project where I need to create a reusable package for my backend REST API using RTK Query. Here’s what I’ve tried so far:

const apiService = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: 'https://api.example.com' }),
  endpoints: (builder) => ({})
})

I’ve configured my package.json with all the necessary dependencies and build scripts. When I run it locally using npm link, everything compiles, but I end up with an ‘Invalid hook call’ error. The types are imported correctly, so I’m suspecting it might be a React version conflict even though both projects are using the same version.

I’m searching for a reliable way to structure this for local development. Has anyone managed to set up a separate RTK Query API package without encountering this hook error? Any suggestions or best practices would be really helpful.

2

I’ve been down this road before, and it can be tricky. One approach that’s worked well for me is to export the API slice configuration separately from the actual API instance. This way, you’re not creating the API directly in your package, which can lead to those pesky hook errors.

Here’s a pattern I’ve used successfully:

export const apiSlice = {
  baseQuery: fetchBaseQuery({ baseUrl: 'https://api.example.com' }),
  endpoints: (builder) => ({
    // Define your endpoints here
  })
};

export const createApi = () => createApi(apiSlice);

In your consuming app, you can then do:

const api = createApi();

This approach gives you more flexibility and avoids issues with React’s rules of hooks. Also, make sure you’re using peerDependencies for React and Redux-related packages in your package.json. This helps ensure version compatibility between your package and the consuming app.

Lastly, consider using a monorepo setup if you’re not already. It can simplify local development and version management across your projects.

3

I’ve encountered this issue before when developing reusable RTK Query packages. One approach that worked well for me was to create a custom hook within your package that initializes and returns the API slice. This way, you can encapsulate the API creation logic and export a function that consumers can use to integrate the API into their Redux store.

Here’s a basic structure I’ve used:

export const createApiHook = (baseUrl) => {
  const api = createApi({
    baseQuery: fetchBaseQuery({ baseUrl }),
    endpoints: (builder) => ({
      // Define your endpoints here
    })
  });

  return () => api;
};

Then in your consuming application, you can use it like this:

const useApi = createApiHook('https://api.example.com');

This method has helped me avoid hook-related errors and made the package more flexible for different environments. Remember to thoroughly test across different React and Redux versions to ensure compatibility.

4

hey liam, had similar issue. try using peerDependencies instead of regular dependencies for react and redux. also, make sure ur consuming app uses exact same versions. might help with that nasty hook error. good luck mate!