如何在请求中设置主体以使用 RTK 查询更新记录？

Question

In EditEmployee component after editing when I click on "Save Changes" button the updateEmployee method for some reason does not send body in PUT request.

What am I doing wrong here?

EditEmployee.js

import React, { useState } from 'react';

import { useUpdateEmployeeMutation } from "./employeesApiSlice";

function EditEmployee(props) {
    const [updateEmployee] = useUpdateEmployeeMutation();
    
    const [updatedFirstName, setUpdatedFirstName] = useState(props.employee.firstName);
    const [updatedLastName, setUpdatedLastName] = useState(props.employee.lastName);
    const [updatedPosition, setUpdatedPosition] = useState(props.employee.position);

    const jobPositions = ['Labor', 'Worker', 'Supervisor', 'Manager', 'HR', 'Director', 'CEO']
        .map((jobPosition, i) => (
            <Col key={i}>
                <Form.Group className="mb-3" controlId={jobPosition.toLowerCase()}>
                    <Form.Check
                        type="radio"
                        name="position"
                        label={jobPosition}
                        value={jobPosition.toLowerCase()}
                        defaultChecked={props.employee.position.toLowerCase() === jobPosition.toLowerCase()}
                        onChange={e => setUpdatedPosition(e.target.value)}
                    />
                </Form.Group>
            </Col>
    ));

    function handleSaveChanges() {
        const employee = {
            firstName: updatedFirstName,
            lastName: updatedLastName,
            position: updatedPosition
        }
        updateEmployee(props.employee.id, employee)
    }

    return (
        <>
           <Form>
              <Form.Group className="mb-3" controlId="formFirstName">
                 <Form.Label>First Name</Form.Label>
                 <Form.Control type="text" defaultValue={updatedFirstName} onChange={e => setUpdatedFirstName(e.target.value)} />
              </Form.Group>
              <Form.Group className="mb-3" controlId="formLastName">
                 <Form.Label>Last Name</Form.Label>
                 <Form.Control type="text" defaultValue={updatedLastName} onChange={e => setUpdatedLastName(e.target.value)} />
              </Form.Group>
              <Container>
                 <Row>
                    {jobPositions}
                 </Row>
              </Container>
           </Form>
                
           <Button variant="success" onClick={() => handleSaveChanges()}>
               Save Changes
           </Button>
       </>
    );
}

export default EditEmployee;

employeeApiSlice.js

import { apiSlice } from "../../app/api/apiSlice";

export const employeesApiSlice = apiSlice.injectEndpoints({
    tagTypes: ['Employees'],
    endpoints: (builder) => ({
        getEmployees: builder.query({
            query: () => ({
                url:'/employee'
            }),
            providesTags:['Employees'],
            keepUnusedDataFor: 2
        }),
        updateEmployee: builder.mutation({
            query: (id, employee) => ({
                url: `/employee/${id}`,
                method: 'PUT',
                body: employee
            }),
            invalidatesTags: ['Employees']
        }),
        addEmployee: builder.mutation({
            query: (employee) => ({
                url: `/employee`,
                method: 'POST',
                body: employee
            }),
            invalidatesTags: ['Employees']
        })
    }),
});

export const {
    useGetEmployeesQuery,
    useUpdateEmployeeMutation,
    useAddEmployeeMutation
} = employeesApiSlice;

Answer 1

The query callback of an endpoint takes a single argument.

See: Mutation Endpoint Definition

export type MutationDefinition< QueryArg, BaseQuery extends BaseQueryFn, TagTypes extends string, ResultType, ReducerPath extends string = string, Context = Record<string, any> > = { query(arg: QueryArg): BaseQueryArg<BaseQuery> <---- Single Argument /* either `query` or `queryFn` can be present, but not both simultaneously */ queryFn( arg: QueryArg, api: BaseQueryApi, extraOptions: BaseQueryExtraOptions<BaseQuery>, baseQuery: (arg: Parameters<BaseQuery>[0]) => ReturnType<BaseQuery> ): MaybePromise<QueryReturnValue<ResultType, BaseQueryError<BaseQuery>>> /* transformResponse only available with `query`, not `queryFn` */ transformResponse?( baseQueryReturnValue: BaseQueryResult<BaseQuery>, meta: BaseQueryMeta<BaseQuery>, arg: QueryArg ): ResultType | Promise<ResultType> /* transformErrorResponse only available with `query`, not `queryFn` */ transformErrorResponse?( baseQueryReturnValue: BaseQueryError<BaseQuery>, meta: BaseQueryMeta<BaseQuery>, arg: QueryArg ): unknown extraOptions?: BaseQueryExtraOptions<BaseQuery> invalidatesTags?: ResultDescription<TagTypes, ResultType, QueryArg> onQueryStarted?( arg: QueryArg, { dispatch, getState, extra, requestId, queryFulfilled, getCacheEntry, }: MutationLifecycleApi ): Promise<void> onCacheEntryAdded?( arg: QueryArg, { dispatch, getState, extra, requestId, cacheEntryRemoved, cacheDataLoaded, getCacheEntry, }: MutationCacheLifecycleApi ): Promise<void> }

If you need to pass multiple values they should be packed in an object.

Example:

updateEmployee: builder.mutation({
  query: ({ id, employee }) => ({
    url: `/employee/${id}`,
    method: 'PUT',
    body: employee
  }),
  invalidatesTags: ['Employees']
}),

function handleSaveChanges() {
  const employee = {
    firstName: updatedFirstName,
    lastName: updatedLastName,
    position: updatedPosition
  };

  updateEmployee({ id: props.employee.id, employee });
}