Add usesyncqueries hook from expo dev tools

Author: LovesWorking

package-lock.json

@@ -17,13 +17,23 @@
     "url": "https://github.com/LovesWorking/react-query-external-sync"
   },
   "keywords": [
-    "react-query",
+    "expo",
+    "devtools",
     "tanstack",
-    "state management",
-    "dev tools",
-    "react native",
-    "QA",
-    "debugging"
+    "query",
+    "react-query",
+    "react-native",
+    "expo-react-native",
+    "expo-react-native-tanstack-query-devtools",
+    "tanstack-query",
+    "tanstack-query-devtools",
+    "tanstack-query-devtools-expo",
+    "tanstack-query-devtools-expo-react-native",
+    "tanstack-query-devtools-expo-plugin",
+    "tanstack-query-devtools-expo-plugin-react-native",
+    "tanstack-query-devtools-expo-plugin-webui",
+    "tanstack-query-devtools-expo-plugin-webui-react-native",
+    "React-Query-Dev-Tools"
   ],
   "author": "LovesWorking (https://github.com/LovesWorking)",
   "license": "MIT",
@@ -32,10 +42,11 @@
     "socket.io-client": "^4.7.4"
   },
   "peerDependencies": {
-    "@tanstack/react-query": "^5.17.19",
+    "@tanstack/react-query": "^4.0.0 || ^5.0.0",
     "react": "^18"
   },
   "devDependencies": {
+    "@tanstack/react-query": "^5.66.9",
     "@babel/core": "^7.23.9",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",

package.json

@@ -0,0 +1,77 @@
+import type {
+  DefaultError,
+  MutationOptions,
+  QueryOptions,
+  Query,
+  QueryClient,
+  Mutation,
+} from "@tanstack/react-query";
+
+import {
+  DehydratedMutation,
+  DehydratedQuery,
+  DehydratedState,
+  ObserverState,
+} from "./types";
+type TransformerFn = (data: any) => any;
+
+export function Dehydrate(client: QueryClient): DehydratedState {
+  const mutations = client
+    .getMutationCache()
+    .getAll()
+    .flatMap((mutation) => [dehydrateMutation(mutation)]);
+
+  const queries = client
+    .getQueryCache()
+    .getAll()
+    .flatMap((query) => [dehydrateQuery(query)]);
+
+  return { mutations, queries };
+}
+export interface DehydrateOptions {
+  serializeData?: TransformerFn;
+  shouldDehydrateMutation?: (mutation: Mutation) => boolean;
+  shouldDehydrateQuery?: (query: Query) => boolean;
+  shouldRedactErrors?: (error: unknown) => boolean;
+}
+
+export interface HydrateOptions {
+  defaultOptions?: {
+    deserializeData?: TransformerFn;
+    queries?: QueryOptions;
+    mutations?: MutationOptions<unknown, DefaultError, unknown, unknown>;
+  };
+}
+
+function dehydrateMutation(mutation: Mutation): DehydratedMutation {
+  return {
+    mutationId: mutation.mutationId,
+    mutationKey: mutation.options.mutationKey,
+    state: mutation.state,
+    ...(mutation.options.scope && { scope: mutation.options.scope }),
+    ...(mutation.meta && { meta: mutation.meta }),
+  };
+}
+
+function dehydrateQuery(query: Query): DehydratedQuery {
+  // Extract observer states
+  const observerStates: ObserverState[] = query.observers.map((observer) => ({
+    queryHash: query.queryHash,
+    options: observer.options,
+    // Remove queryFn from observer options to prevent not being able to capture fetch action
+    queryFn: undefined,
+  }));
+
+  return {
+    state: {
+      ...query.state,
+      ...(query.state.data !== undefined && {
+        data: query.state.data,
+      }),
+    },
+    queryKey: query.queryKey,
+    queryHash: query.queryHash,
+    ...(query.meta && { meta: query.meta }),
+    observers: observerStates,
+  };
+}

src/new-sync/hydration.ts

@@ -0,0 +1,9 @@
+export let useSyncQueries: typeof import("./useSyncQueries").useSyncQueries;
+// @ts-ignore process.env.NODE_ENV is defined by metro transform plugins
+if (process.env.NODE_ENV !== "production") {
+  useSyncQueries = require("./useSyncQueries").useSyncQueries;
+} else {
+  useSyncQueries = () => ({
+    isConnected: false,
+  });
+}

src/new-sync/index.ts

@@ -0,0 +1,59 @@
+import {
+  DefaultError,
+  MutationMeta,
+  MutationScope,
+  MutationState,
+  QueryKey,
+  QueryMeta,
+  QueryObserverOptions,
+  QueryState,
+  MutationKey,
+} from "@tanstack/react-query";
+// Define a simplified version of DehydratedState that both versions can work with
+export interface SimpleDehydratedState {
+  mutations: any[];
+  queries: any[];
+}
+
+export interface SyncMessage {
+  type: "dehydrated-state";
+  state: DehydratedState;
+  isOnlineManagerOnline: boolean;
+}
+
+export interface DehydratedState {
+  mutations: DehydratedMutation[];
+  queries: DehydratedQuery[];
+}
+
+export interface DehydratedMutation {
+  mutationId: number;
+  mutationKey?: MutationKey;
+  state: MutationState;
+  meta?: MutationMeta;
+  scope?: MutationScope;
+}
+export interface DehydratedQuery {
+  queryHash: string;
+  queryKey: QueryKey;
+  state: QueryState;
+  promise?: Promise<unknown>;
+  meta?: QueryMeta;
+  observers: ObserverState[];
+}
+export interface ObserverState<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey
+> {
+  queryHash: string;
+  options: QueryObserverOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryData,
+    TQueryKey
+  >;
+}