Not able to update data in Supabase with RTK-Query mutation

[soleuil]

I have already configured my project with Supabase and all is working just fine. I am able to do CRUD operations using the thunk procedure from Redux-Toolkit. However, I am learning how to use RTK-Query and its habilities to invalidate Tags so the data is refetched. So I configured my "supabaseApi" with the endpoints and all is working fine.

What I am not achieving is to UPDATE data. I could do it with a thunk, so it is not a RLS policy issue. This is my endpoint for RTK-Query:

export const supabaseApi = createApi({
  reducerPath: 'students',
  baseQuery: fakeBaseQuery(),

  tagTypes: ["Students"],

    endpoints: (builder) => ({
        getStudents: builder.query({
            queryFn: async () => {
                const {data, error} = await supabase
                .from('students')
                .select()

                return { data, error }
            },
            providesTags: ["Students"]
        }),

        getStudentById: builder.query({
            queryFn: async ( id ) => {
                const {data, error} = await supabase
                .from('students')
                .select()
                .eq('id', id )
                .single()

                return { data, error }
            },
            providesTags: ["StudentById"]
        }),

        updateStudentDataById: builder.mutation({
            queryFn: async ( activeStudent ) => {

                const studentDoc = { studentName: activeStudent.studentName, 
                                    studentLastName: activeStudent.studentLastName }
                    
                const { data, error } = await supabase
                    .from('students')
                    .update( studentDoc )
                    .eq('id', activeStudent.id )

                return { data, error }
            },
            invalidatesTags: ["StudentById"]
        }),

        addNewStudent: builder.mutation({
            queryFn: async ( studentDoc ) => {
                const { data, error } = await supabase
                .from('students')
                .insert( studentDoc )

                return { data, error }
            },
            invalidatesTags: ["Students"],
        }),

    })
});

export const { useGetStudentsQuery, useAddNewStudentMutation, 
                useGetStudentByIdQuery, useUpdateStudentDataByIdMutation } = supabaseApi;

And then, I import the function in the component with:

const [ updateStudentData, { error } ] = useUpdateStudentDataByIdMutation();

And I assign this constant in an "onClick" for a button:

const onSaveChanges = () => {

      updateStudentData( activeStudent );
      setOpenSnackbar(true);
    }

When I click the button I don't get any error in the console but the data is not updated in Supabase. It is updated in my local state but when I refresh it will turn back to the previous state (not updated in the database).

------------------------- Edited.

I found the issue. It is not related with RTK-Query or Supabase. It was a line that I missing sending to the store the appropriate values. Sorry about that!

[phryneas]

Add a console.log here:

updateStudentDataById: builder.mutation({
            queryFn: async ( activeStudent ) => {
+				console.log("test")
                const studentDoc = { studentName: activeStudent.studentName, 
                                    studentLastName: activeStudent.studentLastName }
                    
                const { data, error } = await supabase
                    .from('students')
                    .update( studentDoc )
                    .eq('id', activeStudent.id )

                return { data, error }
            },
            invalidatesTags: ["StudentById"]
        }),

If that logs out, you are probably using Supabase wrong in some way in the following lines, but it has nothing to do with RTK. The only job RTK has is to call that function - if that happens, it's your job to call Supabase correctly.

Unfortunately, I can't help you with that part as I'm not familiar with Supabase.

[soleuil]

Thank you so much for your quick reply. I added the console.log and it logged in the console. If the RTK-Query part is fine, then it must be something related with Supabase. I will ask in their site also. Or if someone is familiar with it I would appreciate some guidance. Thanks!

By the way, I thought it wouldn't be a Supabase issue because when I do this procedure with that exact same code with a thunk and dispatching the action, it does work. The problem is when I use RTK-Query.

[markerikson]

Out of curiosity:

• Do you see the network request happen when that mutation runs?
• What are data and response when it comes back?

[soleuil]

I do see in the network activity a request method: PATCH with a status code of 204 so apparently it is fine. However, when I console the data and error I get a null, null. I am going to edit the question and add the code that I have for the thunks procedure which is working and see if that helps.