timetravel

Author: Rui Fan

examples/example-2/client/src/client/linked/TimeTravel.tsx

@@ -1,12 +1,21 @@
 import React, { useEffect } from "react";
 import { useQueryClient } from "@tanstack/react-query";
+import { QueryDisplay } from "../types";
 
 const TimeTravel = () => {
  const queryClient = useQueryClient();
 
  useEffect(() => {
  const listener = (event: CustomEvent) => {
- queryClient.setQueryData([event.detail.queryKey], event.detail.queryData);
+ const currentQuery: QueryDisplay[] = event.detail.currentQuery;
+ currentQuery.forEach((queryState) => {
+ if (queryState.queryData !== "N/A") {
+ queryClient.setQueryData(
+ [queryState.queryKey.slice(2, -2)],
+ queryState.queryData,
+ );
+ }
+ });
  };
  window.addEventListener("UpdateUI", listener);
  return () => window.removeEventListener("UpdateUI", listener);

examples/example-2/client/src/client/types.d.ts

@@ -16,4 +16,9 @@ declare global {
  UpdateUI: CustomEvent;
  TimeTravel: CustomEvent;
  }
-}
+}
+
+export type QueryDisplay = {
+ queryKey: string;
+ queryData: any;
+};

examples/example-2/server/models/postsOne.json

@@ -1,16 +1,11 @@
 {
  "posts": [
  {
- "id": 1,
- "text": "Feed 1 - First Post",
+ "text": "feed 2",
  "liked": false,
- "comments": [
- "First comment on first post",
- "Second comment on first post",
- "Third comment on first post"
- ],
+ "comments": [],
  "createComment": true,
- "timestamp": "12:00 PM"
+ "timestamp": "7:02 PM"
  }
  ]
 }

examples/example-2/server/models/postsThree.json

@@ -3,7 +3,7 @@
  {
  "id": 1,
  "text": "Feed 3 - First Post",
- "liked": true,
+ "liked": false,
  "comments": [
  "First comment on first post",
  "Second comment on first post"

examples/example-2/server/models/postsTwo.json

@@ -1,15 +1,18 @@
 {
  "posts": [
  {
- "id": 1,
- "text": "Feed 2 - First Post",
+ "text": "4",
  "liked": true,
- "comments": [
- "First comment on first post",
- "Second comment on first post"
- ],
+ "comments": [],
  "createComment": false,
- "timestamp": "12:00 PM"
+ "timestamp": "9:57 PM"
+ },
+ {
+ "text": "2",
+ "liked": false,
+ "comments": [],
+ "createComment": false,
+ "timestamp": "9:57 PM"
  }
  ]
 }

src/TimeTravel.tsx

@@ -1,12 +1,21 @@
 import React, { useEffect } from "react";
 import { useQueryClient } from "@tanstack/react-query";
+import { QueryDisplay } from "./types";
 
 const TimeTravel = () => {
  const queryClient = useQueryClient();
 
  useEffect(() => {
  const listener = (event: CustomEvent) => {
- queryClient.setQueryData([event.detail.queryKey], event.detail.queryData);
+ const currentQuery: QueryDisplay[] = event.detail.currentQuery;
+ currentQuery.forEach((queryState) => {
+ if (queryState.queryData !== "N/A") {
+ queryClient.setQueryData(
+ [queryState.queryKey.slice(2, -2)],
+ queryState.queryData,
+ );
+ }
+ });
  };
  window.addEventListener("UpdateUI", listener);
  return () => window.removeEventListener("UpdateUI", listener);

src/types.d.ts

@@ -8,3 +8,8 @@ declare global {
  TimeTravel: CustomEvent;
  }
 }
+
+export type QueryDisplay = {
+ queryKey: string;
+ queryData: any;
+};