Create react hook from base api

[banx9x]

I’m building a shared API layer using @reduxjs/toolkit/query (non-react) in a separate library, so I can reuse it across multiple platforms like CLI, native apps, and React.

Here’s a example:

// core/wttr.api.ts (shared lib)
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query';

export const wttrApi = createApi({
  reducerPath: 'wttrApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://wttr.in' }),
  endpoints: (builder) => ({
    getWeather: builder.query<any, string>({
      query: (city) => `/${city}?format=j1`,
    }),
  }),
});

This works well in core code, but when I use it in a React app, there are no hooks like useGetWeatherQuery.

❓ What I’m trying to achieve

I want to keep the core API definition in a reusable package, but still be able to generate React hooks when needed in my React apps, without redefining the endpoints.

Is there a way to wrap or “extend” this core API into one that includes hooks?

How do I properly reuse the endpoints and baseQuery from the original wttrApi?

Any guidance or examples would be greatly appreciated!

Thanks 🙏

[EskiMojo14]

it's an idea we've briefly touched on a couple times before (and made a draft PR here #4128) but it never solidified. if we want it i suspect that PR will need redoing, depending on the complexity of the conflicts it's got