React Query (TanStack Query)

// src/graphql/client.js
import { GraphQLClient } from 'graphql-request';

const gqlClient = new GraphQLClient('https://example.com/graphql');

export default gqlClient;

// src/graphql/posts.js
import { gql } from 'graphql-request';

export const GET_POSTS = gql`
  query GetPosts($search: String) {
    posts(search: $search) {
      id
      title
      author { id name }
    }
  }
`;

export const DELETE_POST = gql`
  mutation DeletePost($id: ID!) {
    deletePost(id: $id) { id }
  }
`;

// src/query/queryClient.js
import { QueryClient } from '@tanstack/react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: { staleTime: 30_000, refetchOnWindowFocus: false },
  },
});

export default queryClient;

// src/store/posts.js
import { createModule, createSagas } from 'redux-box';
import {
  call,
  cancelled,
  delay,
  put,
  race,
  take,
} from 'redux-saga/effects';

import gqlClient from '../graphql/client';
import { DELETE_POST } from '../graphql/posts';
import queryClient from '../query/queryClient';

const UNDO_WINDOW_MS = 5_000;
const POSTS_KEY = ['posts'];

const types = {
  REQUEST_DELETE: 'posts/REQUEST_DELETE',
  UNDO_DELETE:    'posts/UNDO_DELETE',
  DELETE_SUCCESS: 'posts/DELETE_SUCCESS',
  DELETE_FAILURE: 'posts/DELETE_FAILURE',
};

const state = {
  // { [postId]: { post, deadlineAt } }
  pending: {},
  lastError: null,
};

export const dispatchers = {
  requestDelete: post => ({ type: types.REQUEST_DELETE, post }),
  undoDelete:    id   => ({ type: types.UNDO_DELETE, id }),
};

const mutations = {
  [types.REQUEST_DELETE]: (state, { post }) => {
    state.pending[post.id] = {
      post,
      deadlineAt: Date.now() + UNDO_WINDOW_MS,
    };
    state.lastError = null;
  },
  [types.UNDO_DELETE]:    (state, { id }) => { delete state.pending[id]; },
  [types.DELETE_SUCCESS]: (state, { id }) => { delete state.pending[id]; },
  [types.DELETE_FAILURE]: (state, { id, error }) => {
    delete state.pending[id];
    state.lastError = error;
  },
};

// Snapshot the cached query data for every variant of `['posts', …]` so we
// can roll back to exactly what the user was looking at.
function snapshotPostsQueries() {
  return queryClient.getQueriesData({ queryKey: POSTS_KEY });
}

function restoreSnapshot(entries) {
  entries.forEach(([key, data]) => queryClient.setQueryData(key, data));
}

function removeFromPostsQueries(id) {
  queryClient.setQueriesData({ queryKey: POSTS_KEY }, old => {
    if (!old?.posts) return old;
    return { ...old, posts: old.posts.filter(p => p.id !== id) };
  });
}

function* watchPendingDelete({ post }) {
  const { id } = post;
  const snapshot = yield call(snapshotPostsQueries);

  // 1. Optimistically remove the post from every cached posts query, so
  //    every mounted useQuery sees it gone immediately.
  yield call(removeFromPostsQueries, id);

  try {
    // 2. Race the undo window against an UNDO action targeting this id.
    const { undo } = yield race({
      timeout: delay(UNDO_WINDOW_MS),
      undo:    take(a => a.type === types.UNDO_DELETE && a.id === id),
    });

    if (undo) {
      yield call(restoreSnapshot, snapshot);
      return;
    }

    // 3. Window elapsed — actually fire the mutation.
    yield call([gqlClient, 'request'], DELETE_POST, { id });
    yield put({ type: types.DELETE_SUCCESS, id });
  } catch (error) {
    yield call(restoreSnapshot, snapshot);
    yield put({ type: types.DELETE_FAILURE, id, error: error.message });
  } finally {
    if (yield cancelled()) {
      // Component or store was torn down mid‑race; restore to be safe.
      yield call(restoreSnapshot, snapshot);
    }
  }
}

const sagas = createSagas({
  // takeEvery — every requested delete spawns its own race.
  // takeLatest would cancel the previous worker and silently drop its undo.
  [`${types.REQUEST_DELETE}__@every`]: watchPendingDelete,
});

export const getPendingDeletes = state =>
  Object.values(state.posts.pending);
export const getPendingDeleteIds = state =>
  new Set(Object.keys(state.posts.pending));
export const getLastError = state => state.posts.lastError;

export default createModule({ state, dispatchers, mutations, sagas });

// src/store/index.js
import { createStore } from 'redux-box';
import posts from './posts';

export default createStore({ posts });