RTK Query Error handling/ _a2 is undefined?

Question

I' have many different RTK Query calls made throughout my app, and they all have been working fine (get, post, patch, delete). Yet on my current component with a post call, I'm getting an error that I have not seen before and cannot figure out what is tripping it up. The error I'm getting is name: "TypeError", message: "_a2 is undefined", followed by a long stack starting with fetchBaseQuery. The call to the backend works fine on Postman, I have no props or fields defined as _a2 (or anything close to that), the stack trace has no reference to an _a2, and I cannot find anything online referencing the same error. Is this something that anyone has seen?

I tried getting more detail from the error based on the suggestions from the docs, but these all return undefined. So maybe not an RTK Query error? If not though, I'm at a total loss. https://redux-toolkit.js.org/rtk-query/usage/error-handling

I have my set up below, in case I'm just completely overlooking a simple syntax issue.

apiSlice call:

addGoal: builder.mutation({
            query: (arg) => {
                const {planId, values} = arg;
                return {
                url: `/planapi/goals/${planId}`,
                method: 'POST',
                body: values
                }, console.log(values)
            },
            invalidatesTags: ['Goals']
        }),

the component making the call:

const AddGoal = ({planId}) => {
  
  const [addNewGoal, { error }] = useAddGoalMutation()
    
  let rtkerror
  if (error) {
        console.log("error", error.status, error.data) //returns undefined
        rtkerror = {error.status} {JSON.stringify(error.data)}
       //nothing is rendered from this, probably because coming back undefined?
    }


  const [open, setOpen] = React.useState(false);
  console.log("planId ", planId)


  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };
   
  return (
  
    
    
      Add New Goal {rtkerror} 
      
       
  
   {

      console.log(values);
      
      try {
      const payload =  await addNewGoal({ planId, values })
      .unwrap()
      .then((payload) => console.log('fulfilled', payload)) //this is also logging fulfilled undefined
      .catch((error) => console.error('rejected', error)); //I've tried as error.status and error.data but these return undefined.
        console.log('fulfilled', payload)
      } catch (err) {
        console.error('Failed to save goal: ', err)
        toast.error("Error Adding Goal", {
          position: toast.POSITION.TOP_CENTER
        });
      }

      toast.success("Goal Added", {
        position: toast.POSITION.TOP_RIGHT
      });
      //handleClose();
      
    }}>
  
 
    {formik => (
      
        
        
        
        
        
        
        
        
        
        
        
        
          
          
      
      
    )}
      
      
      
    
    
  );
};

I attempted to get more details from the error in a couple of spots, but the only one that logs anything is the .catch after the call and .unwrap() (which is what provided the error referenced above). When I tried error.status or error.data, I just get undefined. But logging the error I get the stack trace with the _a2 is undefined.

phry · Accepted Answer

Due to you attaching , console.log(values) after the return statement, your query function returns undefined. That might already be your problem - can you remove that?

RTK Query Error handling/ _a2 is undefined?

Answers (1)

Related Questions