// customize a base query
export const myBaseQuery = (
  args,
  { dispatch, getState, extra },
  extraOptions,
) => {
  // determine baseUrl by `region`, which passed in via `extra`
  // we can also read config information from store via getState.
  const baseUrl = getBaseUrlByRegion(extra.region);

  // do more things with baseUrl
};

// declare myApi and endpoints
export const myApi = createApi({
  reducerPath: 'myApi',
  baseQuery: myBaseQuery,
  endpoints: builder => ({
    // getPostById only cares about `id`,
    // so I do not want to pass `region` as additional args here. 
    getPostById: builder.query<any, number>({
      query: id => ({
        url: `posts/${id}`,
        method: 'GET',
      }),
    }),
  }),
});

// while inside a component
// want to set `extra` when useQuery/useLazyQuery/useMutation,
// so any further calls to `getPostById` will contains the `region` information,
// but those hooks does not accept `extra` args.
const [getPostById, { data }] = myApi.endpoints.getPostById.useLazyQuery(
  { region: 'us' },  // does not work here
);

// expected clean call
const postInUsRegion = getPostById(12);

const [getPostById, { data }] = myApi.endpoints.getPostById.useLazyQuery()

// unexpected, because parameter `region` is not part of the api.
const postInSgRegion = getPostById({postId: 12, region: 'sg'})

const promise = dispatch(api.endpoints.getPosts.initiate(12), { region: 'us' })

test('passes the extraArgument property to the baseQueryApi', async () => {
  const baseQuery = (_args: any, api: BaseQueryApi) => ({ data: api.extra })
  const api = createApi({
    baseQuery,
    endpoints: (build) => ({
      getUser: build.query<unknown, void>({
        query: () => '',
      }),
    }),
  })
  const store = configureStore({
    reducer: {
      [api.reducerPath]: api.reducer,
    },
    middleware: (gDM) =>
      gDM({ thunk: { extraArgument: 'cakes' } }).concat(api.middleware),
  })
  const { getUser } = api.endpoints
  const { data } = await store.dispatch(getUser.initiate())
  expect(data).toBe('cakes')
})