Partial Mutation

[alexnsorensen]

Hi All

I know this has probably been asked and discussed to death but I still thought I would ask for assistance particularly if anyone can point me in the right direction, I had a look and couldn't seem to find my particular use case/issue.

My use case is pretty straight forward it's a class checkin system to track when students attend classes/sessions, now overall useSWR works great, however there are a few locations where there is no WiFi and the cellular connection is garbage at best.

This is my code to mutate the students and check them in:

getGraph() is a function I wrote to send persisted graphQL queries

// This is because I'm lazy and don't want to do null checking everywhere
const students = (() => {
    if (studentsQuery.data) {
        return studentsQuery.data.students;
    }

    return [];
})();

function addCheckin(studentId: string) {
    const tempId = uuidv4();

    // used for the optimistic update because we don't have an id yet
    const tempCheckin = {
        id: tempId,
        studentId,
        classId,
    };

    studentsQuery.mutate(
        async (data) => {
            if (data && data.students) {
                const { students } = data;
                const result = await getGraph<IAddTrainingSessionMutation, AddTrainingSessionMutationVariables>(queries.addTrainingSession, {
                    session: {
                        studentId,
                        classId,
                        date: DateTime.now().toSQLDate(),
                    },
                });

                if (result.session) {
                    const { session } = result;

                    const student = _.find(students, { id: studentId })!;
                    student.trainingSessions.push(session);
                    student.trainingSessions = _.reject(student.trainingSessions, { id: tempId });
                }
            }

            return _.cloneDeep({ students });
        },
        {
            optimisticData: (data) => {
                if (data && data.students) {
                    const student = _.find(students, { id: studentId })!;
                    student.trainingSessions.push(tempCheckin);
                }

                return _.cloneDeep({ students });
            },
            revalidate: false,
        }
    );
}

The queries.addTrainingSession query returns the session that was just created, not all the checkins, I'm also not keen on getting all the data back from the server as it can be a lot, and again some locations have poor internet so I want to reduce the payload that is received.

So my issue arrises at the locations with poor reception, if they tap on students rather quickly it can take a few seconds for it to save, and it seems when that happens there is an issue where the new sessions don't get populated.

Within the Optimistic update section I am aware I am using my variable instead of the actual cached data and that is because again in the same issue, if there are rapid taps on the checkins it doesn't update quick enough. The reason I need the Ids populated is because if a person taps an incorrect person by mistake they can tap them again to remove their checkin, and if it sends the wrong id, it won't actually delete anything.

I'm happy to provide any more information to help, this is a rare situation, but has occured.