Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Help - How to create select for RTKQ endpoint with arguments? #3627

Closed
nouman91 opened this issue Jul 27, 2023 · 7 comments
Closed

Help - How to create select for RTKQ endpoint with arguments? #3627

nouman91 opened this issue Jul 27, 2023 · 7 comments

Comments

@nouman91
Copy link

nouman91 commented Jul 27, 2023

Hi,
I have a use case where I want to create a selector for the RTKQ endpoint. The idea is to have an error selector for the endpoints and use that in the components.
I have looked everywhere so far I have not found any example of how to create a selector with arguments.
Example code:

export const myApi = apiSlice.injectEndpoints({
  endpoints: (builder) => ({
    getSomeData: builder.query<Type[], string[]>({
      query: (params) => ({
        params: { uuids: params.join(',') },
        url: 'url,
      }),
      transformResponse: (res: { results: Type[] }) => res.results,
          }),
  }),
});


const apiInfo = apiSlice.endpoints.getThreats.select(???? how to pass argument here)
export const apiErrorSelector = createSelector(apiInfo, state=>state.error);

@EskiMojo14
Copy link
Collaborator

EskiMojo14 commented Jul 28, 2023

the typical pattern is to make a new selector each time:

export const apiErrorSelector = createSelector(
  (state, arg) => apiSlice.endpoints.getThreats.select(arg)(state), 
  state=>state.error
);

apiErrorSelector(state, arg)

this however will suffer from incorrect memoisation. on the other hand, you could wrap your own selector creator:

const makeApiErrorSelector = (arg) => {
  const selectApiInfo = apiSlice.endpoints.getThreats.select(arg)
  return createSelector(selectApiInfo, state=>state.error);
}

This would allow for proper memoisation as long as you hold onto the selector instance.

To offer a completely different approach, have you considered using selectFromResult?

@phryneas
Copy link
Member

Also, with some memoization:

const createApiSelector = createSelector(
  arg => arg,
  apiSlice.endpoints.getThreats.select
>

export const apiErrorSelector = createSelector(
  state => state,
  (state, arg) => createApiSelector(arg), 
  (state, selector) =>selector(state).error
);

@nouman91
Copy link
Author

Thank you! While these solutions work, I will go with a different approach as my idea was to show errors without much for business logic since this will require to know arguments it will not work for my use cases.

@andreisocaciu
Copy link

I think this solution should be included in the documentation. I searched a bit to find a solution, and I really think it would be easier if it was included in the section about using RTK Query without hooks. Right now it only talks about simple queries that don't have any parameters.

@EskiMojo14
Copy link
Collaborator

yeah, in general that section is a little neglected - I'll see if I can add a bit to it today

@EskiMojo14
Copy link
Collaborator

@andreisocaciu thoughts on #3963?

@andreisocaciu
Copy link

@EskiMojo14 That is perfect.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants