State transformation that relies on other global state.

[tomascsantos]

Hello and thank you for creating this wonderful toolkit. I am new to Redux and feel a little overwhelmed using RTX Query on top of it, but the functionality it provides is very alluring.

Here is my situation:
2 endpoints:
.../api/me --> gives the current username etc
.../api/habits --> a big array of habits that the user is in.

I have created two query endpoints:

  setUser: builder.query({
      query: () => "api/me/",
      transformResponse: (response) => {
          return response[0]
      },
  }),
  getGroups: builder.query({
      query: () => "api/habits/",
      transformResponse: (response) => {
          return response.map((group) => {
              return processGroup(group);
          })
      }
  })

My current struggle, is that I am not quite sure how to transform the response from the "api/habits" using global state data from "api/me".

I know that there is a transformResponse function, however I cannot access the global state at this point (I think?)
I know that we should be using selectors to Derive Data, however when I attempted to write a selector like so:

    let user = selectUser(state)
    console.log("user is: ", user)

    //  For each group add a section for thisuser
    state.youdoneApi.queries.getGroups.data.map((group) => {
        group.thisUser = {
            checkedIn: false,
        };
        if (user) {
            _.forEach(group.members, (member) => {
                if (member.username === user.username) {
                    group.thisUser = member;
                }
            });
        }
    })

    //  For each group add a section for thisuser
    state.youdoneApi.queries.getGroups.data.map((group) => {
        group.thisUser = {
            checkedIn: false,
        };
        if (user) {
            _.forEach(group.members, (member) => {
                if (member.username === user.username) {
                    group.thisUser = member;
                }
            });
        }
    })

My print statement shows that users is null at the time of the function call. I would not expect this to be the case since in my environment the api/me should be called before the other endpoint.

I think that I might be thinking about all of this the wrong way, but I am not sure how to untangle this mess. Any links, tutorials, etc would be appreciated.

Thanks :)

[phryneas]

state.youdoneApi.queries.getGroups.data is simply the wrong path ;)

Write this as a reselect selector and also use the pre-generated selectors (for more on reselect, read https://redux.js.org/usage/deriving-data-selectors )

const selector = createSelector(
  api.endpoints.getUser.select(),
  api.endpoints.getGroups.select(),
  (user, groups) => {
    return ...
  }
)

[tomascsantos]

Awesome thank you!! I think the key was using the pre-generated selectors.