javascriptjavascript-objectsredux-toolkitrtk-queryobject-destructuring

Confusion regarding object destructuring


I've a RTK query which takes email and password as arguments and returns login info from the server.

RTK QUERY code


const authService = createApi({
  reducerPath: "auth",
  baseQuery: fetchBaseQuery({ baseUrl: "http://localhost:8000/auth/" }),
  endpoints: (builder) => ({
    authLogin: builder.mutation({
      query: ({ email, password }) => ({
        url: "login",
        method: "POST",
        body: { email, password },
      }),
    }),
  }),
});

Function which invokes authLogin(from elsewhere) by passing email and password as required by the query.


const [authLogin, response] = useAuthLoginMutation();

  const handleLogin = (e) => {
    e.preventDefault();
    authLogin({ email, password });
  };

I don't understand why despite being destructured as ({email, password}) in authLogin query call, the body still takes in email and password with curly braces? If email and password are already destructured in the query call, shouldn't the code be body:(email, password) instead of body:{email, password}?

I do realize that I'm missing something very basic(regarding objects and destructuring), perhaps someone could explain where I'm going wrong in simple words.


Solution

  • body: { email, password },
    

    is just the shorthand version of

    body: { email: email, password: password },
    

    No destructuring going on at this point, just a POJO.


    Using

    body: (email, password)
    

    would also be valid syntax using the comma operator, but it would result in body being assigned the string password.

    The comma operator (,) evaluates each of its operands (from left to right) and returns the value of the last operand.