cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-19 06:04:05 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

fix: rq optimistic mutations (#219)

Browse Source 
Fixes a mistake with the react query migration which prevented optimistic mutations from working
This commit is contained in:
Carlos Valente
2022-10-16 20:58:05 +02:00
committed by GitHub
parent cf963f6e05
commit 61cbce780d
4 changed files with 16 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "ontime-ui", "name": "ontime-ui",
"version": "1.8.4", "version": "1.8.5",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@chakra-ui/react": "^2.3.2", "@chakra-ui/react": "^2.3.2",
client/src/common/api/apiConstants.js
+2 -1
View File
@@ -2,7 +2,8 @@ export const STATIC_PORT = 4001;
export const EVENT_TABLE = ['event']; export const EVENT_TABLE = ['event'];
export const ALIASES = ['aliases']; export const ALIASES = ['aliases'];
export const USERFIELDS = ['userFields']; export const USERFIELDS = ['userFields'];
export const EVENTS_TABLE = ['events']; export const EVENTS_TABLE_KEY = 'events';
export const EVENTS_TABLE = [EVENTS_TABLE_KEY];
export const APP_TABLE = ['appinfo']; export const APP_TABLE = ['appinfo'];
export const OSC_SETTINGS = ['oscSettings']; export const OSC_SETTINGS = ['oscSettings'];
export const APP_SETTINGS = ['appSettings']; export const APP_SETTINGS = ['appSettings'];
client/src/features/editors/list/EventListWrapper.jsx
+12 -12
View File
@@ -1,6 +1,6 @@
import { useCallback, useContext, useEffect, useState } from 'react'; import { useCallback, useContext, useEffect, useState } from 'react';
import { useMutation, useQueryClient } from '@tanstack/react-query'; import { useMutation, useQueryClient } from '@tanstack/react-query';
import { EVENTS_TABLE } from 'common/api/apiConstants'; import { EVENTS_TABLE, EVENTS_TABLE_KEY } from 'common/api/apiConstants';
import { import {
fetchAllEvents, fetchAllEvents,
requestApplyDelay, requestApplyDelay,
@@ -79,13 +79,13 @@ export default function EventListWrapper() {
// we optimistically update here // we optimistically update here
onMutate: async (newEvent) => { onMutate: async (newEvent) => {
// cancel ongoing queries // cancel ongoing queries
queryClient.cancelQueries([EVENTS_TABLE, newEvent.id]); queryClient.cancelQueries([EVENTS_TABLE_KEY, newEvent.id]);
// Snapshot the previous value // Snapshot the previous value
const previousEvent = queryClient.getQueryData([EVENTS_TABLE, newEvent.id]); const previousEvent = queryClient.getQueryData([EVENTS_TABLE_KEY, newEvent.id]);
// optimistically update object // optimistically update object
queryClient.setQueryData([EVENTS_TABLE, newEvent.id], newEvent); queryClient.setQueryData([EVENTS_TABLE_KEY, newEvent.id], newEvent);
// Return a context with the previous and new todo // Return a context with the previous and new todo
return { previousEvent, newEvent }; return { previousEvent, newEvent };
@@ -93,12 +93,12 @@ export default function EventListWrapper() {
// Mutation fails, rollback undos optimist update // Mutation fails, rollback undos optimist update
onError: (error, newEvent, context) => { onError: (error, newEvent, context) => {
queryClient.setQueryData([EVENTS_TABLE, context.newEvent.id], context.previousEvent); queryClient.setQueryData([EVENTS_TABLE_KEY, context.newEvent.id], context.previousEvent);
}, },
// Mutation finished, failed or successful // Mutation finished, failed or successful
// Fetch anyway, just to be sure // Fetch anyway, just to be sure
onSettled: (newEvent) => { onSettled: (newEvent) => {
queryClient.invalidateQueries([EVENTS_TABLE, newEvent.id]); queryClient.invalidateQueries([EVENTS_TABLE_KEY, newEvent.id]);
}, },
}); });
@@ -106,13 +106,13 @@ export default function EventListWrapper() {
// we optimistically update here // we optimistically update here
onMutate: async (newEvent) => { onMutate: async (newEvent) => {
// cancel ongoing queries // cancel ongoing queries
queryClient.cancelQueries([EVENTS_TABLE, newEvent.id]); queryClient.cancelQueries([EVENTS_TABLE_KEY, newEvent.id]);
// Snapshot the previous value // Snapshot the previous value
const previousEvent = queryClient.getQueryData([EVENTS_TABLE, newEvent.id]); const previousEvent = queryClient.getQueryData([EVENTS_TABLE_KEY, newEvent.id]);
// optimistically update object // optimistically update object
queryClient.setQueryData([EVENTS_TABLE, newEvent.id], newEvent); queryClient.setQueryData([EVENTS_TABLE_KEY, newEvent.id], newEvent);
// Return a context with the previous and new todo // Return a context with the previous and new todo
return { previousEvent, newEvent }; return { previousEvent, newEvent };
@@ -120,13 +120,13 @@ export default function EventListWrapper() {
// Mutation fails, rollback undos optimist update // Mutation fails, rollback undos optimist update
onError: (error, newEvent, context) => { onError: (error, newEvent, context) => {
queryClient.setQueryData([EVENTS_TABLE, context.newEvent.id], context.previousEvent); queryClient.setQueryData([EVENTS_TABLE_KEY, context.newEvent.id], context.previousEvent);
}, },
// Mutation finished, failed or successful // Mutation finished, failed or successful
// Fetch anyway, just to be sure // Fetch anyway, just to be sure
onSettled: (newEvent) => { onSettled: (newEvent) => {
if (newEvent) { if (newEvent) {
queryClient.invalidateQueries([EVENTS_TABLE, newEvent.id]); queryClient.invalidateQueries([EVENTS_TABLE_KEY, newEvent.id]);
} else { } else {
queryClient.invalidateQueries(EVENTS_TABLE); queryClient.invalidateQueries(EVENTS_TABLE);
} }
@@ -137,7 +137,7 @@ export default function EventListWrapper() {
// we optimistically update here // we optimistically update here
onMutate: async (eventId) => { onMutate: async (eventId) => {
// cancel ongoing queries // cancel ongoing queries
queryClient.cancelQueries([EVENTS_TABLE, eventId]); queryClient.cancelQueries([EVENTS_TABLE_KEY, eventId]);
// Snapshot the previous value // Snapshot the previous value
const previousEvents = queryClient.getQueryData(EVENTS_TABLE); const previousEvents = queryClient.getQueryData(EVENTS_TABLE);
server/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "ontime", "name": "ontime",
"version": "1.8.4", "version": "1.8.5",
"author": "Carlos Valente", "author": "Carlos Valente",
"description": "Time keeping for live events", "description": "Time keeping for live events",
"repository": "https://github.com/cpvalente/ontime", "repository": "https://github.com/cpvalente/ontime",