RTK Query: Updating nested part of state but sending all of state to in request

[hydenp]

Hey Guys,

I'm working on implementing RTK query into our app and am struggling with how to update just part of object.

Currently, the object fetched from the backend looks something like this

{
    "title": "Test title",
    "sections": {
        "section1_id": {
            "title": "Section title",
            "subsections": [
                "subsection1_id", "subsection2_id"
            ],
            "rules": [
                "rule1_id"
            ]
        },
        "section2_id": {
            "title": "Section two title",
            "subsections": [],
            "rules": []
        }
    },
    "subsections": {
        "subsection1_id": {
            "title": "Subsection 1 title",
            "rules": [
                "rule2_id"
            ]
        }
    },
    "rules": {
        "rule1_id": {
            "title": "Rule one title",
            "type": "rule one type",
            "values": 12345
        },
        "rule2_id": {
            "title": "Rule two title",
            "type": "rule two type",
            "values": 12345
        }
    }
}

Each type within the app has its own component, so there is a RuleComponent, a SectionComponent etc and each of these know their respective ids for their respective type in the above model—so the component rendering rule 1 knows it's id is rule1_id

My question is: when I want to update, say the title of a rule, or a section, or perhaps remove a section, how do I do this in a an RTK Query mutation? I need to send back the whole object to the backend because it's actually "unflattened" and stored in a more tree-like structure. Each component only knows its id and not a lot about the rest of the state, but the backend requires the entire "document" in order to perform an update.

Previously, I was just using redux, I had reducers to update the specific piece of state with Immer, when the state was ready to save, I'd simply get the whole state and send it to the backend.

I'm a little knew to all this so really appreciate any help.

Thoughts so far, have a mutate query for removeSection, updateSection, etc, or possible define some sort of extraReducer to update the particular type of state, then once complete, send the state to the backend?

export const backendApi = createApi({
  reducerPath: 'backendApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:8000' }),
  endpoints: builder => ({
    getObject: builder.query({
      query: () => '/,
    }),
    getDegree: builder.query({
      query: (degree_id: string) => `/${degree_id}`,
    }),
    updateDegree: builder.mutation({
      query: ({type: string, id: string, new_data: SomeType }) => ({
        // const data = { ...body },
        url: `/flat/`,
        method: 'PUT',
        body: , { ...state, [state[type][id]] = new_data}
      }),
      extraReducers: builder => {
        builder.addCase(updateDegree, (state, action) => {
          switch(action.payload.type) {
            // maybe something here?
          }
        })
      }
    }),
  }),
})

Basically I need to update part of the state, then send the whole state back to the backend. I haven't really been able to find a case similar to this to work off of so some help would be tremendously appreciated!

I'm aware this data model / structure is un-ideal for certain reasons, but it also has reasons for it to be the way it is. If anyone has suggestions on how I can do this best way, truly appreciate any help

[hydenp]

So far, the best way I can see to do this is to use the useQueryState hook to grab the entire state of the query in the component, then when the user is ready to submit/save, update the data from useQueryState with what is needed, then pass that as the body to the updateDegree query and have the entire object set to go.

Something like this inside a section component...

const { section } = useGetDegreeQuery(degree_id, {
    selectFromResult: ({ data }) => ({
      section: data?.sections[props.section_id] ?? [],
    }),
  })
  const { data } = backendApi.endpoints?.getDegree.useQueryState(degree_id)
  const [updateDegree] = useUpdateDegreeMutation()
  const [title, setTitle] = useState(section.title)

  function update() {
    updateDegree({
      ...data,
      sections: {
        ...data?.sections,
        [props.section_id]: {
          ...section,
          title: title,
        }
      }
    })
  }

The issue at this point is that data is read-only, is there any way to use Immer on the data object in this scenario so I could directly update the attributes I need more easily?

Moreover, if anyone thinks this is a poor way to solve this problem, I'm open to better solutions.

Ultimately, I think it's far better than putting it in the API slice like above as this way, each component then deals with manipulating the part of the cache it relates too.