@mobx-query/core 0.2.0

package/src/libs/mobx-query/queries/QueryOneBase.ts

@@ -0,0 +1,93 @@
+import type {
+  EntityConstructorAny,
+  EntityCollection,
+  EntityDataAny,
+  EntityId,
+} from "../entity";
+import { QueryBase } from "./QueryBase";
+import type { UseQueryOneOptions } from "./types";
+import { type InferEntityData, invalidateQueryByHash } from "../utils";
+import type { DefaultError } from "@tanstack/react-query";
+
+export class QueryOneBase<
+  TArguments,
+  TMeta = void,
+  TEntityConstructor extends EntityConstructorAny = EntityConstructorAny,
+  TError extends DefaultError = DefaultError,
+> extends QueryBase<TArguments> {
+  protected readonly collection: EntityCollection<TEntityConstructor>;
+
+  constructor(
+    queryPrefix: string,
+    protected readonly options: UseQueryOneOptions<
+      TArguments,
+      TMeta,
+      TEntityConstructor,
+      TError
+    >,
+  ) {
+    super([options.entity], () => {
+      return [queryPrefix, ...options.queryKey()];
+    });
+    this.collection = this.getEntityCollection(options.entity);
+  }
+
+  prefetch(args: TArguments) {
+    const queryFn = this.queryFnWrapper(args);
+    return this.queryClient.prefetchQuery({
+      queryKey: queryFn.queryKey,
+      queryFn: () => queryFn.run(),
+    });
+  }
+
+  ensureData(args: TArguments) {
+    const queryFn = this.queryFnWrapper(args);
+    return this.queryClient.ensureQueryData({
+      queryKey: queryFn.queryKey,
+      queryFn: () => queryFn.run(),
+    });
+  }
+
+  invalidate(args: TArguments) {
+    invalidateQueryByHash(
+      this.createQueryHash(args),
+      this.queryClient.getQueryCache(),
+    );
+  }
+
+  setQueryData(data: InferEntityData<TEntityConstructor>, args: TArguments) {
+    const queryKey = this.createQueryKey(args);
+    // @ts-expect-error: data is not an entity
+    const entity = this.setOneEntity(data, queryKey, this.options.entity);
+    this.queryClient.setQueryData(queryKey, entity.id);
+  }
+
+  protected getEntity(id: EntityId) {
+    if (this.collection.deletedRecordIds.has(id)) {
+      return null;
+    }
+
+    const entity = this.collection.collection.get(id);
+
+    return entity as unknown as InstanceType<TEntityConstructor>;
+  }
+
+  protected queryFnWrapper(args: TArguments) {
+    const queryKey = this.createQueryKey(args);
+    return {
+      run: async () => {
+        if (!this.options.queryFn) {
+          throw new Error("Query function is not defined");
+        }
+
+        const data = (await this.options.queryFn(
+          args,
+          this.context,
+        )) as EntityDataAny;
+        const entity = this.setOneEntity(data, queryKey, this.options.entity);
+        return entity.id as EntityId;
+      },
+      queryKey,
+    };
+  }
+}

package/src/libs/mobx-query/queries/index.ts

@@ -0,0 +1,33 @@
+import type {
+  UseQueryManyFunction,
+  UseQueryOneOptions,
+  UseQueryCommonOptions,
+  UseQueryManyOptions,
+  UseQueryOneFunction,
+} from "./types";
+
+import { QueryBase } from "./QueryBase";
+import { QueryFragmentMany } from "./QueryFragmentMany";
+import { QueryFragmentOne } from "./QueryFragmentOne";
+import { QueryMany } from "./QueryMany";
+import { QueryManyBase } from "./QueryManyBase";
+import { QueryOne } from "./QueryOne";
+import { QueryOneBase } from "./QueryOneBase";
+
+export {
+  QueryBase,
+  QueryFragmentMany,
+  QueryFragmentOne,
+  QueryMany,
+  QueryManyBase,
+  QueryOne,
+  QueryOneBase,
+};
+
+export type {
+  UseQueryCommonOptions,
+  UseQueryManyFunction,
+  UseQueryManyOptions,
+  UseQueryOneFunction,
+  UseQueryOneOptions,
+};

package/src/libs/mobx-query/queries/types.ts

@@ -0,0 +1,60 @@
+import type { DefaultError, NetworkMode } from "@tanstack/react-query";
+import type { EntityConstructorAny } from "../entity";
+import type { MQClientContextRegistered } from "../client/types";
+import type { InferEntityData } from "../utils";
+
+export type UseQueryManyFunction<
+  TArguments,
+  TEntityConstructor extends EntityConstructorAny,
+> = (
+  args: TArguments,
+  context: MQClientContextRegistered,
+) =>
+  | InferEntityData<TEntityConstructor>[]
+  | Promise<InferEntityData<TEntityConstructor>[]>;
+
+export type UseQueryOneFunction<
+  TArguments,
+  TEntityConstructor extends EntityConstructorAny,
+> = (
+  args: TArguments,
+  context: MQClientContextRegistered,
+) =>
+  | InferEntityData<TEntityConstructor>
+  | Promise<InferEntityData<TEntityConstructor>>;
+
+export interface UseQueryCommonOptions<
+  TArguments,
+  TMeta = void,
+  TEntityConstructor extends EntityConstructorAny = EntityConstructorAny,
+  TError extends DefaultError = DefaultError,
+> {
+  entity: TEntityConstructor;
+  queryKey: () => ReadonlyArray<unknown>;
+  staleTime?: number | "static";
+  gcTime?: number;
+  enabled?: boolean | ((meta: TMeta, args: TArguments) => boolean);
+  // enabled?: boolean
+  networkMode?: NetworkMode;
+  retry?: boolean | number | ((failureCount: number, error: TError) => boolean);
+  retryOnMount?: boolean;
+  retryDelay?: number | ((failureCount: number, error: TError) => number);
+}
+
+export interface UseQueryOneOptions<
+  TArguments,
+  TMeta = void,
+  TEntityConstructor extends EntityConstructorAny = EntityConstructorAny,
+  TError extends DefaultError = DefaultError,
+> extends UseQueryCommonOptions<TArguments, TMeta, TEntityConstructor, TError> {
+  queryFn?: UseQueryOneFunction<TArguments, TEntityConstructor>;
+}
+
+export interface UseQueryManyOptions<
+  TArguments,
+  TMeta = void,
+  TEntityConstructor extends EntityConstructorAny = EntityConstructorAny,
+  TError extends DefaultError = DefaultError,
+> extends UseQueryCommonOptions<TArguments, TMeta, TEntityConstructor, TError> {
+  queryFn?: UseQueryManyFunction<TArguments, TEntityConstructor>;
+}

package/src/libs/mobx-query/react/createReactContext.tsx

@@ -0,0 +1,23 @@
+import { createContext, useContext } from "react";
+import { MQClient } from "../client";
+
+export function createReactContext<TMQClient extends MQClient<any>>() {
+  const context = createContext<TMQClient | null>(null);
+
+  return {
+    Provider: ({
+      children,
+      client,
+    }: {
+      children: React.ReactNode;
+      client: TMQClient;
+    }) => <context.Provider value={client}>{children}</context.Provider>,
+    useContext: () => {
+      const ctx = useContext(context);
+      if (!ctx) {
+        throw new Error("useMQ must be used within an MQProvider");
+      }
+      return ctx;
+    },
+  };
+}

package/src/libs/mobx-query/react/index.ts

@@ -0,0 +1,3 @@
+import { createReactContext } from "./createReactContext";
+
+export { createReactContext };

package/src/libs/mobx-query/utils/generateEntityId.ts

@@ -0,0 +1,12 @@
+import type { EntityConstructorAny } from "../entity";
+
+const ENTITY_ID_INCREMENTORS = new Map<string, number>();
+const CLIENT_ONLY_ENTITY_ID_PREFIX = "entityClientOnlyId";
+
+export function generateEntityId(
+  entityConstructor: EntityConstructorAny,
+): string {
+  const id = (ENTITY_ID_INCREMENTORS.get(entityConstructor.name) ?? 0) + 1;
+  ENTITY_ID_INCREMENTORS.set(entityConstructor.name, id);
+  return `${CLIENT_ONLY_ENTITY_ID_PREFIX}_${entityConstructor.name}_${id}`;
+}

package/src/libs/mobx-query/utils/index.ts

@@ -0,0 +1,8 @@
+import { generateEntityId } from "./generateEntityId";
+import { invalidateQueryByHash } from "./invalidateQueryByHash";
+
+import type { InferEntity, InferEntityData } from "./types";
+
+export { invalidateQueryByHash, generateEntityId };
+
+export type { InferEntity, InferEntityData };

package/src/libs/mobx-query/utils/invalidateQueryByHash.ts

@@ -0,0 +1,18 @@
+import type { QueryCache } from '@tanstack/react-query'
+
+export function invalidateQueryByHash(
+  hash: string,
+  cache: QueryCache,
+  onQueryNotFound?: (hash: string) => void,
+) {
+  const query = cache.get(hash)
+
+  if (query) {
+    query.invalidate()
+    if (query.isActive()) {
+      query.fetch()
+    }
+  } else {
+    onQueryNotFound?.(hash)
+  }
+}

package/src/libs/mobx-query/utils/types.ts

@@ -0,0 +1,18 @@
+import type { EntityAny, EntityDataAny } from "../entity";
+
+export type InferEntity<T> = T extends { new (...args: any[]): infer E }
+  ? E extends EntityAny
+    ? E
+    : never
+  : T extends EntityAny
+    ? T
+    : never;
+
+export type InferEntityData<T> =
+  InferEntity<T> extends {
+    hydrate(data: infer TData): void;
+  }
+    ? TData
+    : T extends EntityDataAny
+      ? T
+      : never;

package/src/libs/react-query.ts

@@ -0,0 +1,11 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: 1000 * 60,
+      staleTime: 1000 * 60,
+      refetchOnWindowFocus: false,
+    },
+  },
+});

package/src/main.tsx

@@ -0,0 +1,16 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { queryClient } from "./libs/react-query.ts";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  </StrictMode>
+);

package/src/utils.ts

@@ -0,0 +1,3 @@
+export function wait(ms: number) {
+  return new Promise((resolve) => setTimeout(() => resolve(void 0), ms));
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.app.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": false,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": false,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,52 @@
+import { defineConfig } from "vite";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import react from "@vitejs/plugin-react";
+import observerPlugin from "mobx-react-observer/babel-plugin";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const mobxQueryDir = resolve(__dirname, "src/libs/mobx-query");
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    react({
+      babel: {
+        plugins: [
+          observerPlugin(),
+          [
+            "@babel/plugin-proposal-decorators",
+            {
+              version: "2023-05",
+            },
+          ],
+        ],
+      },
+    }),
+  ],
+  build: {
+    lib: {
+      entry: {
+        client: resolve(mobxQueryDir, "./client/index.js"),
+        entity: resolve(mobxQueryDir, "./entity/index.js"),
+        mutations: resolve(mobxQueryDir, "./mutations/index.js"),
+        queries: resolve(mobxQueryDir, "./queries/index.js"),
+        react: resolve(mobxQueryDir, "./react/index.js"),
+        utils: resolve(mobxQueryDir, "./utils/index.js"),
+      },
+      name: "mobx-query",
+    },
+    rollupOptions: {
+      external: [
+        "react",
+        "react-dom",
+        "mobx",
+        "mobx-react-lite",
+        "mobx-react-observer",
+        "@tanstack/react-query",
+        "@tanstack/react-query-devtools",
+      ],
+    },
+  },
+});