From 09d7228706a33a32f6473654185d9ee9e166740e Mon Sep 17 00:00:00 2001 From: Hadi Chahine Date: Wed, 31 Dec 2025 04:20:08 +0400 Subject: [PATCH 1/4] Add react query data fetching. --- boilerplates/express/files/server/entry.ts | 3 + boilerplates/fastify/files/server/entry.ts | 3 + boilerplates/h3/files/server/entry.ts | 3 + boilerplates/hono/files/server/entry.ts | 3 + boilerplates/vike-react-query/bati.config.ts | 7 ++ .../vike-react-query/files/$package.json.ts | 8 ++ .../vike-react-query/files/pages/+config.ts | 13 ++++ .../files/pages/todo/!+data.ts | 0 .../files/pages/todo/TodoList.tsx | 73 +++++++++++++++++++ .../files/server/todo-handlers.ts | 50 +++++++++++++ .../vike-react-query/files/services/api.ts | 32 ++++++++ boilerplates/vike-react-query/package.json | 68 +++++++++++++++++ boilerplates/vike-react-query/tsconfig.json | 3 + packages/cli/rules.ts | 3 + packages/features/src/features.ts | 19 +++++ packages/features/src/rules/enum.ts | 2 + packages/features/src/rules/rules.ts | 7 ++ website/components/RulesMessages.tsx | 12 +++ 18 files changed, 309 insertions(+) create mode 100644 boilerplates/vike-react-query/bati.config.ts create mode 100644 boilerplates/vike-react-query/files/$package.json.ts create mode 100644 boilerplates/vike-react-query/files/pages/+config.ts create mode 100644 boilerplates/vike-react-query/files/pages/todo/!+data.ts create mode 100644 boilerplates/vike-react-query/files/pages/todo/TodoList.tsx create mode 100644 boilerplates/vike-react-query/files/server/todo-handlers.ts create mode 100644 boilerplates/vike-react-query/files/services/api.ts create mode 100644 boilerplates/vike-react-query/package.json create mode 100644 boilerplates/vike-react-query/tsconfig.json diff --git a/boilerplates/express/files/server/entry.ts b/boilerplates/express/files/server/entry.ts index 81ea66c7f..9818be671 100644 --- a/boilerplates/express/files/server/entry.ts +++ b/boilerplates/express/files/server/entry.ts @@ -6,6 +6,7 @@ import { createTodoHandler } from "@batijs/shared-server/server/create-todo-hand import { telefuncHandler } from "@batijs/telefunc/server/telefunc-handler"; import { trpcHandler } from "@batijs/trpc/server/trpc-handler"; import { tsRestHandler } from "@batijs/ts-rest/server/ts-rest-handler"; +import { getTodosHandler } from "@batijs/vike-react-query/server/todo-handlers"; import { apply, serve } from "@photonjs/express"; import express from "express"; @@ -35,6 +36,8 @@ function startApp() { //# BATI.has("ts-rest") // ts-rest route. See https://ts-rest.com tsRestHandler, + //# BATI.has("vike-react-query") + getTodosHandler, //# !BATI.has("telefunc") && !BATI.has("trpc") && !BATI.has("ts-rest") createTodoHandler, ]); diff --git a/boilerplates/fastify/files/server/entry.ts b/boilerplates/fastify/files/server/entry.ts index ac2bd03dd..e40f000c1 100644 --- a/boilerplates/fastify/files/server/entry.ts +++ b/boilerplates/fastify/files/server/entry.ts @@ -6,6 +6,7 @@ import { createTodoHandler } from "@batijs/shared-server/server/create-todo-hand import { telefuncHandler } from "@batijs/telefunc/server/telefunc-handler"; import { trpcHandler } from "@batijs/trpc/server/trpc-handler"; import { tsRestHandler } from "@batijs/ts-rest/server/ts-rest-handler"; +import { getTodosHandler } from "@batijs/vike-react-query/server/todo-handlers"; import { apply, serve } from "@photonjs/fastify"; import fastify from "fastify"; import rawBody from "fastify-raw-body"; @@ -42,6 +43,8 @@ async function startApp() { //# BATI.has("ts-rest") // ts-rest route. See https://ts-rest.com tsRestHandler, + //# BATI.has("vike-react-query") + getTodosHandler, //# !BATI.has("telefunc") && !BATI.has("trpc") && !BATI.has("ts-rest") createTodoHandler, ]); diff --git a/boilerplates/h3/files/server/entry.ts b/boilerplates/h3/files/server/entry.ts index 80000c296..b32f5e66e 100644 --- a/boilerplates/h3/files/server/entry.ts +++ b/boilerplates/h3/files/server/entry.ts @@ -6,6 +6,7 @@ import { createTodoHandler } from "@batijs/shared-server/server/create-todo-hand import { telefuncHandler } from "@batijs/telefunc/server/telefunc-handler"; import { trpcHandler } from "@batijs/trpc/server/trpc-handler"; import { tsRestHandler } from "@batijs/ts-rest/server/ts-rest-handler"; +import { getTodosHandler } from "@batijs/vike-react-query/server/todo-handlers"; import { apply, serve } from "@photonjs/h3"; import { createApp } from "h3"; @@ -35,6 +36,8 @@ function startApp() { //# BATI.has("ts-rest") // ts-rest route. See https://ts-rest.com tsRestHandler, + //# BATI.has("vike-react-query") + getTodosHandler, //# !BATI.has("telefunc") && !BATI.has("trpc") && !BATI.has("ts-rest") createTodoHandler, ]); diff --git a/boilerplates/hono/files/server/entry.ts b/boilerplates/hono/files/server/entry.ts index 2bc9a652b..cb30e4405 100644 --- a/boilerplates/hono/files/server/entry.ts +++ b/boilerplates/hono/files/server/entry.ts @@ -6,6 +6,7 @@ import { createTodoHandler } from "@batijs/shared-server/server/create-todo-hand import { telefuncHandler } from "@batijs/telefunc/server/telefunc-handler"; import { trpcHandler } from "@batijs/trpc/server/trpc-handler"; import { tsRestHandler } from "@batijs/ts-rest/server/ts-rest-handler"; +import { getTodosHandler } from "@batijs/vike-react-query/server/todo-handlers"; import { apply, serve } from "@photonjs/hono"; import { Hono } from "hono"; import { getMiddlewares } from "vike-photon/universal-middlewares"; @@ -43,6 +44,8 @@ function startApp() { //# BATI.has("ts-rest") // ts-rest route. See https://ts-rest.com tsRestHandler, + //# BATI.has("vike-react-query") + getTodosHandler, //# !BATI.has("telefunc") && !BATI.has("trpc") && !BATI.has("ts-rest") createTodoHandler, ]); diff --git a/boilerplates/vike-react-query/bati.config.ts b/boilerplates/vike-react-query/bati.config.ts new file mode 100644 index 000000000..a365928f8 --- /dev/null +++ b/boilerplates/vike-react-query/bati.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from "@batijs/core/config"; + +export default defineConfig({ + if(meta) { + return meta.BATI.has("vike-react-query"); + }, +}); diff --git a/boilerplates/vike-react-query/files/$package.json.ts b/boilerplates/vike-react-query/files/$package.json.ts new file mode 100644 index 000000000..15a2e232f --- /dev/null +++ b/boilerplates/vike-react-query/files/$package.json.ts @@ -0,0 +1,8 @@ +import { loadPackageJson, type TransformerProps } from "@batijs/core"; + +export default async function getPackageJson(props: TransformerProps) { + const packageJson = await loadPackageJson(props, await import("../package.json").then((x) => x.default)); + + return packageJson.addDependencies(["@tanstack/react-query", "vike-react-query"]); +} + diff --git a/boilerplates/vike-react-query/files/pages/+config.ts b/boilerplates/vike-react-query/files/pages/+config.ts new file mode 100644 index 000000000..61be76e12 --- /dev/null +++ b/boilerplates/vike-react-query/files/pages/+config.ts @@ -0,0 +1,13 @@ +import type { Config } from "vike/types"; +import vikePhoton from "vike-photon/config"; +import vikeReact from "vike-react/config"; +import vikeReactQuery from "vike-react-query/config"; + +const config: Config = { + extends: [vikeReact, vikeReactQuery, vikePhoton], + photon: { + server: "../server/entry.ts", + }, +} satisfies Config; + +export default config; diff --git a/boilerplates/vike-react-query/files/pages/todo/!+data.ts b/boilerplates/vike-react-query/files/pages/todo/!+data.ts new file mode 100644 index 000000000..e69de29bb diff --git a/boilerplates/vike-react-query/files/pages/todo/TodoList.tsx b/boilerplates/vike-react-query/files/pages/todo/TodoList.tsx new file mode 100644 index 000000000..c17075de7 --- /dev/null +++ b/boilerplates/vike-react-query/files/pages/todo/TodoList.tsx @@ -0,0 +1,73 @@ +import { useMutation, useSuspenseQuery, useQueryClient } from "@tanstack/react-query"; +import { type ChangeEvent, useState } from "react"; +import { createTodo, fetchTodos, type TodoItem } from "../../services/api"; + +export function TodoList() { + const queryClient = useQueryClient(); + const [newTodo, setNewTodo] = useState(""); + + const { data: todoItems = [] } = useSuspenseQuery({ + queryKey: ["todos"], + queryFn: fetchTodos, + }); + + const createMutation = useMutation({ + mutationFn: createTodo, + onMutate: async (text) => { + await queryClient.cancelQueries({ queryKey: ["todos"] }); + const previousTodos = queryClient.getQueryData(["todos"]); + queryClient.setQueryData(["todos"], (old = []) => [...old, { text }]); + return { previousTodos }; + }, + onError: (_err, _text, context) => { + if (context?.previousTodos) { + queryClient.setQueryData(["todos"], context.previousTodos); + } + }, + onSettled: () => { + queryClient.invalidateQueries({ queryKey: ["todos"] }); + }, + }); + + return ( + <> +
    + {todoItems.map((todoItem, index) => ( + // biome-ignore lint: example +
  • {todoItem.text}
    • + ))} +
+
+
{ + ev.preventDefault(); + if (newTodo.trim()) { + createMutation.mutate(newTodo); + setNewTodo(""); + } + }} + > + ) => setNewTodo(ev.currentTarget.value)} + value={newTodo} + //# BATI.has("tailwindcss") + className={ + "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-full sm:w-auto p-2 mr-1 mb-1" + } + /> + +
+
+ + ); +} diff --git a/boilerplates/vike-react-query/files/server/todo-handlers.ts b/boilerplates/vike-react-query/files/server/todo-handlers.ts new file mode 100644 index 000000000..7a4a6a272 --- /dev/null +++ b/boilerplates/vike-react-query/files/server/todo-handlers.ts @@ -0,0 +1,50 @@ +import * as d1Queries from "@batijs/d1-sqlite/database/d1/queries/todos"; +import type { dbD1, dbSqlite } from "@batijs/drizzle/database/drizzle/db"; +import * as drizzleQueries from "@batijs/drizzle/database/drizzle/queries/todos"; +import type { dbKysely, dbKyselyD1 } from "@batijs/kysely/database/kysely/db"; +import * as kyselyQueries from "@batijs/kysely/database/kysely/queries/todos"; +import type { db as sqliteDb } from "@batijs/sqlite/database/sqlite/db"; +import * as sqliteQueries from "@batijs/sqlite/database/sqlite/queries/todos"; +import { enhance, type UniversalHandler } from "@universal-middleware/core"; + +export const getTodosHandler: UniversalHandler< + Universal.Context & + BATI.If<{ + 'BATI.has("sqlite") && !BATI.hasD1': { db: ReturnType }; + 'BATI.has("drizzle") && !BATI.hasD1': { db: ReturnType }; + 'BATI.has("drizzle")': { db: ReturnType }; + 'BATI.has("kysely") && !BATI.hasD1': { db: ReturnType }; + 'BATI.has("kysely")': { db: ReturnType }; + "BATI.hasD1": { db: D1Database }; + _: object; + }> +> = enhance( + async (_request, _context, _runtime) => { + let todoItems: { text: string }[]; + + if (BATI.has("drizzle")) { + todoItems = await drizzleQueries.getAllTodos(_context.db); + } else if (BATI.has("sqlite") && !BATI.hasD1) { + todoItems = sqliteQueries.getAllTodos(_context.db); + } else if (BATI.has("kysely")) { + todoItems = await kyselyQueries.getAllTodos(_context.db); + } else if (BATI.hasD1) { + todoItems = await d1Queries.getAllTodos(_context.db); + } else { + todoItems = [{ text: "Buy milk" }, { text: "Buy strawberries" }]; + } + + return new Response(JSON.stringify(todoItems), { + status: 200, + headers: { + "content-type": "application/json", + }, + }); + }, + { + name: "my-app:get-todos-handler", + path: `/api/todo`, + method: ["GET"], + immutable: false, + }, +); diff --git a/boilerplates/vike-react-query/files/services/api.ts b/boilerplates/vike-react-query/files/services/api.ts new file mode 100644 index 000000000..8f886dc2a --- /dev/null +++ b/boilerplates/vike-react-query/files/services/api.ts @@ -0,0 +1,32 @@ +export type TodoItem = { text: string }; + +function getBaseUrl(): string { + if (typeof window !== "undefined") { + return ""; + } + const port = process.env.PORT ? parseInt(process.env.PORT, 10) : 3000; + return `http://localhost:${port}`; +} + +export async function fetchTodos(): Promise { + const baseUrl = getBaseUrl(); + const response = await fetch(`${baseUrl}/api/todo`); + if (!response.ok) { + throw new Error("Failed to fetch todos"); + } + return response.json(); +} + +export async function createTodo(text: string): Promise { + const baseUrl = getBaseUrl(); + const response = await fetch(`${baseUrl}/api/todo/create`, { + method: "POST", + body: JSON.stringify({ text }), + headers: { + "Content-Type": "application/json", + }, + }); + if (!response.ok) { + throw new Error("Failed to create todo"); + } +} diff --git a/boilerplates/vike-react-query/package.json b/boilerplates/vike-react-query/package.json new file mode 100644 index 000000000..aae71e7c8 --- /dev/null +++ b/boilerplates/vike-react-query/package.json @@ -0,0 +1,68 @@ +{ + "name": "@batijs/vike-react-query", + "private": true, + "version": "0.0.1", + "description": "", + "type": "module", + "scripts": { + "check-types": "tsc --noEmit", + "build": "bati-compile-boilerplate" + }, + "keywords": [], + "author": "", + "license": "MIT", + "devDependencies": { + "@batijs/compile": "workspace:*", + "@tanstack/react-query": "^5.90.16", + "@types/node": "^20.19.25", + "@types/react": "^19.2.7", + "@universal-middleware/core": "^0.4.14", + "react": "^19.2.1", + "vike": "^0.4.250", + "vike-react": "^0.6.18", + "vike-react-query": "^0.1.12", + "vite": "^7.3.0" + }, + "dependencies": { + "@batijs/core": "workspace:*" + }, + "files": [ + "dist/" + ], + "exports": { + "./pages/+config": { + "types": "./dist/types/pages/+config.d.ts" + }, + "./pages/todo/!+data": { + "types": "./dist/types/pages/todo/!+data.d.ts" + }, + "./services/api": { + "types": "./dist/types/services/api.d.ts" + }, + "./pages/todo/TodoList": { + "types": "./dist/types/pages/todo/TodoList.d.ts" + }, + "./server/todo-handlers": { + "types": "./dist/types/server/todo-handlers.d.ts" + } + }, + "typesVersions": { + "*": { + "pages/+config": [ + "./dist/types/pages/+config.d.ts" + ], + "pages/todo/!+data": [ + "./dist/types/pages/todo/!+data.d.ts" + ], + "services/api": [ + "./dist/types/services/api.d.ts" + ], + "pages/todo/TodoList": [ + "./dist/types/pages/todo/TodoList.d.ts" + ], + "server/todo-handlers": [ + "./dist/types/server/todo-handlers.d.ts" + ] + } + } +} diff --git a/boilerplates/vike-react-query/tsconfig.json b/boilerplates/vike-react-query/tsconfig.json new file mode 100644 index 000000000..8b62c8bdd --- /dev/null +++ b/boilerplates/vike-react-query/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": ["../tsconfig.base.json"] +} diff --git a/packages/cli/rules.ts b/packages/cli/rules.ts index 66c067ed5..3ad268bdd 100644 --- a/packages/cli/rules.ts +++ b/packages/cli/rules.ts @@ -59,6 +59,9 @@ Choose one of them or remove selected Server`, [RulesMessage.ERROR_SHADCN_R_REACT]: error( `${inverse(bold("shadcn/ui"))} is only compatible with ${inverse(bold("React"))}`, ), + [RulesMessage.ERROR_VIKE_REACT_QUERY_R_REACT]: error( + `${inverse(bold("React"))} is required when using ${inverse(bold("React Query"))}`, + ), [RulesMessage.WARN_SHADCN_R_TAILWINDCSS]: warning( `${inverse(bold("shadcn/ui"))} integration is tied to ${inverse(bold("TailwindCSS"))}. Using another CSS library with it may have unpredictable behaviour.`, ), diff --git a/packages/features/src/features.ts b/packages/features/src/features.ts index a07ed4b53..44af55d66 100644 --- a/packages/features/src/features.ts +++ b/packages/features/src/features.ts @@ -282,6 +282,25 @@ export const features = [ }, ], }, + { + category: "Data fetching", + label: "React Query", + flag: "vike-react-query", + dependsOn: ["react"], + url: "https://tanstack.com/query", + tagline: "Powerful asynchronous state management, server-state utilities and data fetching", + repo: "tanstack/query", + links: [ + { + label: "Getting started", + href: "https://tanstack.com/query/latest/docs/react/overview", + }, + { + label: "vike-react-query", + href: "https://github.com/vikejs/vike-react-query", + }, + ], + }, // Server { diff --git a/packages/features/src/rules/enum.ts b/packages/features/src/rules/enum.ts index c6745c5b8..8c4b85fe8 100644 --- a/packages/features/src/rules/enum.ts +++ b/packages/features/src/rules/enum.ts @@ -18,6 +18,8 @@ export enum RulesMessage { ERROR_MANTINE_R_REACT, // shadcn/ui is only compatible with React ERROR_SHADCN_R_REACT, + // React is required when using vike-react-query + ERROR_VIKE_REACT_QUERY_R_REACT, // --- WARNING // shadcn/ui integration is tailored for tailwind diff --git a/packages/features/src/rules/rules.ts b/packages/features/src/rules/rules.ts index d50c95d78..89f47b982 100644 --- a/packages/features/src/rules/rules.ts +++ b/packages/features/src/rules/rules.ts @@ -49,6 +49,13 @@ export default [ return false; }), + filter(RulesMessage.ERROR_VIKE_REACT_QUERY_R_REACT, (fts) => { + if (fts.has("vike-react-query")) { + return fts.has("vue") || fts.has("solid") || !fts.has("react"); + } + + return false; + }), filter(RulesMessage.WARN_SHADCN_R_TAILWINDCSS, (fts) => { if (fts.has("shadcn-ui")) { return fts.has("daisyui") || fts.has("compiled-css"); diff --git a/website/components/RulesMessages.tsx b/website/components/RulesMessages.tsx index 23f1fea64..dd943636d 100644 --- a/website/components/RulesMessages.tsx +++ b/website/components/RulesMessages.tsx @@ -177,6 +177,18 @@ export const rulesMessages = { ); }), + [RulesMessage.ERROR_VIKE_REACT_QUERY_R_REACT]: error(() => { + return ( + + React is required when using React Query. +
    +
  • + Either pick React or unselect React Query +
    • +
+ + ); + }), [RulesMessage.WARN_SHADCN_R_TAILWINDCSS]: warning(() => { return ( From 7d6a02db1e9fdb52ba49f6b29de1f84e1635884d Mon Sep 17 00:00:00 2001 From: Hadi Chahine Date: Wed, 31 Dec 2025 04:33:18 +0400 Subject: [PATCH 2/4] rename to react-query --- boilerplates/express/files/server/entry.ts | 4 ++-- boilerplates/fastify/files/server/entry.ts | 4 ++-- boilerplates/h3/files/server/entry.ts | 4 ++-- boilerplates/hono/files/server/entry.ts | 4 ++-- boilerplates/{vike-react-query => react-query}/bati.config.ts | 2 +- .../{vike-react-query => react-query}/files/$package.json.ts | 1 - .../{vike-react-query => react-query}/files/pages/+config.ts | 0 .../files/pages/todo/!+data.ts | 0 .../files/pages/todo/TodoList.tsx | 0 .../files/server/todo-handlers.ts | 0 .../{vike-react-query => react-query}/files/services/api.ts | 0 boilerplates/{vike-react-query => react-query}/package.json | 2 +- boilerplates/{vike-react-query => react-query}/tsconfig.json | 0 packages/features/src/features.ts | 2 +- packages/features/src/rules/enum.ts | 2 +- packages/features/src/rules/rules.ts | 4 ++-- 16 files changed, 14 insertions(+), 15 deletions(-) rename boilerplates/{vike-react-query => react-query}/bati.config.ts (69%) rename boilerplates/{vike-react-query => react-query}/files/$package.json.ts (99%) rename boilerplates/{vike-react-query => react-query}/files/pages/+config.ts (100%) rename boilerplates/{vike-react-query => react-query}/files/pages/todo/!+data.ts (100%) rename boilerplates/{vike-react-query => react-query}/files/pages/todo/TodoList.tsx (100%) rename boilerplates/{vike-react-query => react-query}/files/server/todo-handlers.ts (100%) rename boilerplates/{vike-react-query => react-query}/files/services/api.ts (100%) rename boilerplates/{vike-react-query => react-query}/package.json (97%) rename boilerplates/{vike-react-query => react-query}/tsconfig.json (100%) diff --git a/boilerplates/express/files/server/entry.ts b/boilerplates/express/files/server/entry.ts index 9818be671..8a21c27a9 100644 --- a/boilerplates/express/files/server/entry.ts +++ b/boilerplates/express/files/server/entry.ts @@ -6,7 +6,7 @@ import { createTodoHandler } from "@batijs/shared-server/server/create-todo-hand import { telefuncHandler } from "@batijs/telefunc/server/telefunc-handler"; import { trpcHandler } from "@batijs/trpc/server/trpc-handler"; import { tsRestHandler } from "@batijs/ts-rest/server/ts-rest-handler"; -import { getTodosHandler } from "@batijs/vike-react-query/server/todo-handlers"; +import { getTodosHandler } from "@batijs/react-query/server/todo-handlers"; import { apply, serve } from "@photonjs/express"; import express from "express"; @@ -36,7 +36,7 @@ function startApp() { //# BATI.has("ts-rest") // ts-rest route. See https://ts-rest.com tsRestHandler, - //# BATI.has("vike-react-query") + //# BATI.has("react-query") getTodosHandler, //# !BATI.has("telefunc") && !BATI.has("trpc") && !BATI.has("ts-rest") createTodoHandler, diff --git a/boilerplates/fastify/files/server/entry.ts b/boilerplates/fastify/files/server/entry.ts index e40f000c1..0ae94f60c 100644 --- a/boilerplates/fastify/files/server/entry.ts +++ b/boilerplates/fastify/files/server/entry.ts @@ -6,7 +6,7 @@ import { createTodoHandler } from "@batijs/shared-server/server/create-todo-hand import { telefuncHandler } from "@batijs/telefunc/server/telefunc-handler"; import { trpcHandler } from "@batijs/trpc/server/trpc-handler"; import { tsRestHandler } from "@batijs/ts-rest/server/ts-rest-handler"; -import { getTodosHandler } from "@batijs/vike-react-query/server/todo-handlers"; +import { getTodosHandler } from "@batijs/react-query/server/todo-handlers"; import { apply, serve } from "@photonjs/fastify"; import fastify from "fastify"; import rawBody from "fastify-raw-body"; @@ -43,7 +43,7 @@ async function startApp() { //# BATI.has("ts-rest") // ts-rest route. See https://ts-rest.com tsRestHandler, - //# BATI.has("vike-react-query") + //# BATI.has("react-query") getTodosHandler, //# !BATI.has("telefunc") && !BATI.has("trpc") && !BATI.has("ts-rest") createTodoHandler, diff --git a/boilerplates/h3/files/server/entry.ts b/boilerplates/h3/files/server/entry.ts index b32f5e66e..1197e4d09 100644 --- a/boilerplates/h3/files/server/entry.ts +++ b/boilerplates/h3/files/server/entry.ts @@ -6,7 +6,7 @@ import { createTodoHandler } from "@batijs/shared-server/server/create-todo-hand import { telefuncHandler } from "@batijs/telefunc/server/telefunc-handler"; import { trpcHandler } from "@batijs/trpc/server/trpc-handler"; import { tsRestHandler } from "@batijs/ts-rest/server/ts-rest-handler"; -import { getTodosHandler } from "@batijs/vike-react-query/server/todo-handlers"; +import { getTodosHandler } from "@batijs/react-query/server/todo-handlers"; import { apply, serve } from "@photonjs/h3"; import { createApp } from "h3"; @@ -36,7 +36,7 @@ function startApp() { //# BATI.has("ts-rest") // ts-rest route. See https://ts-rest.com tsRestHandler, - //# BATI.has("vike-react-query") + //# BATI.has("react-query") getTodosHandler, //# !BATI.has("telefunc") && !BATI.has("trpc") && !BATI.has("ts-rest") createTodoHandler, diff --git a/boilerplates/hono/files/server/entry.ts b/boilerplates/hono/files/server/entry.ts index cb30e4405..9c7e876cf 100644 --- a/boilerplates/hono/files/server/entry.ts +++ b/boilerplates/hono/files/server/entry.ts @@ -6,7 +6,7 @@ import { createTodoHandler } from "@batijs/shared-server/server/create-todo-hand import { telefuncHandler } from "@batijs/telefunc/server/telefunc-handler"; import { trpcHandler } from "@batijs/trpc/server/trpc-handler"; import { tsRestHandler } from "@batijs/ts-rest/server/ts-rest-handler"; -import { getTodosHandler } from "@batijs/vike-react-query/server/todo-handlers"; +import { getTodosHandler } from "@batijs/react-query/server/todo-handlers"; import { apply, serve } from "@photonjs/hono"; import { Hono } from "hono"; import { getMiddlewares } from "vike-photon/universal-middlewares"; @@ -44,7 +44,7 @@ function startApp() { //# BATI.has("ts-rest") // ts-rest route. See https://ts-rest.com tsRestHandler, - //# BATI.has("vike-react-query") + //# BATI.has("react-query") getTodosHandler, //# !BATI.has("telefunc") && !BATI.has("trpc") && !BATI.has("ts-rest") createTodoHandler, diff --git a/boilerplates/vike-react-query/bati.config.ts b/boilerplates/react-query/bati.config.ts similarity index 69% rename from boilerplates/vike-react-query/bati.config.ts rename to boilerplates/react-query/bati.config.ts index a365928f8..685c8e659 100644 --- a/boilerplates/vike-react-query/bati.config.ts +++ b/boilerplates/react-query/bati.config.ts @@ -2,6 +2,6 @@ import { defineConfig } from "@batijs/core/config"; export default defineConfig({ if(meta) { - return meta.BATI.has("vike-react-query"); + return meta.BATI.has("react-query"); }, }); diff --git a/boilerplates/vike-react-query/files/$package.json.ts b/boilerplates/react-query/files/$package.json.ts similarity index 99% rename from boilerplates/vike-react-query/files/$package.json.ts rename to boilerplates/react-query/files/$package.json.ts index 15a2e232f..239da3e14 100644 --- a/boilerplates/vike-react-query/files/$package.json.ts +++ b/boilerplates/react-query/files/$package.json.ts @@ -5,4 +5,3 @@ export default async function getPackageJson(props: TransformerProps) { return packageJson.addDependencies(["@tanstack/react-query", "vike-react-query"]); } - diff --git a/boilerplates/vike-react-query/files/pages/+config.ts b/boilerplates/react-query/files/pages/+config.ts similarity index 100% rename from boilerplates/vike-react-query/files/pages/+config.ts rename to boilerplates/react-query/files/pages/+config.ts diff --git a/boilerplates/vike-react-query/files/pages/todo/!+data.ts b/boilerplates/react-query/files/pages/todo/!+data.ts similarity index 100% rename from boilerplates/vike-react-query/files/pages/todo/!+data.ts rename to boilerplates/react-query/files/pages/todo/!+data.ts diff --git a/boilerplates/vike-react-query/files/pages/todo/TodoList.tsx b/boilerplates/react-query/files/pages/todo/TodoList.tsx similarity index 100% rename from boilerplates/vike-react-query/files/pages/todo/TodoList.tsx rename to boilerplates/react-query/files/pages/todo/TodoList.tsx diff --git a/boilerplates/vike-react-query/files/server/todo-handlers.ts b/boilerplates/react-query/files/server/todo-handlers.ts similarity index 100% rename from boilerplates/vike-react-query/files/server/todo-handlers.ts rename to boilerplates/react-query/files/server/todo-handlers.ts diff --git a/boilerplates/vike-react-query/files/services/api.ts b/boilerplates/react-query/files/services/api.ts similarity index 100% rename from boilerplates/vike-react-query/files/services/api.ts rename to boilerplates/react-query/files/services/api.ts diff --git a/boilerplates/vike-react-query/package.json b/boilerplates/react-query/package.json similarity index 97% rename from boilerplates/vike-react-query/package.json rename to boilerplates/react-query/package.json index aae71e7c8..8f3cae5ee 100644 --- a/boilerplates/vike-react-query/package.json +++ b/boilerplates/react-query/package.json @@ -1,5 +1,5 @@ { - "name": "@batijs/vike-react-query", + "name": "@batijs/react-query", "private": true, "version": "0.0.1", "description": "", diff --git a/boilerplates/vike-react-query/tsconfig.json b/boilerplates/react-query/tsconfig.json similarity index 100% rename from boilerplates/vike-react-query/tsconfig.json rename to boilerplates/react-query/tsconfig.json diff --git a/packages/features/src/features.ts b/packages/features/src/features.ts index 44af55d66..b328bd0ba 100644 --- a/packages/features/src/features.ts +++ b/packages/features/src/features.ts @@ -285,7 +285,7 @@ export const features = [ { category: "Data fetching", label: "React Query", - flag: "vike-react-query", + flag: "react-query", dependsOn: ["react"], url: "https://tanstack.com/query", tagline: "Powerful asynchronous state management, server-state utilities and data fetching", diff --git a/packages/features/src/rules/enum.ts b/packages/features/src/rules/enum.ts index 8c4b85fe8..526685b87 100644 --- a/packages/features/src/rules/enum.ts +++ b/packages/features/src/rules/enum.ts @@ -18,7 +18,7 @@ export enum RulesMessage { ERROR_MANTINE_R_REACT, // shadcn/ui is only compatible with React ERROR_SHADCN_R_REACT, - // React is required when using vike-react-query + // React is required when using React Query ERROR_VIKE_REACT_QUERY_R_REACT, // --- WARNING diff --git a/packages/features/src/rules/rules.ts b/packages/features/src/rules/rules.ts index 89f47b982..7945e866c 100644 --- a/packages/features/src/rules/rules.ts +++ b/packages/features/src/rules/rules.ts @@ -50,8 +50,8 @@ export default [ return false; }), filter(RulesMessage.ERROR_VIKE_REACT_QUERY_R_REACT, (fts) => { - if (fts.has("vike-react-query")) { - return fts.has("vue") || fts.has("solid") || !fts.has("react"); + if (fts.has("react-query")) { + return !fts.has("react"); } return false; From 2d22a29a561b23701dbd9740821dc38fed198b1d Mon Sep 17 00:00:00 2001 From: Hadi Chahine Date: Wed, 31 Dec 2025 04:42:25 +0400 Subject: [PATCH 3/4] Fix tsconfig for react query. --- boilerplates/react-query/tsconfig.json | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/boilerplates/react-query/tsconfig.json b/boilerplates/react-query/tsconfig.json index 8b62c8bdd..17c3990c4 100644 --- a/boilerplates/react-query/tsconfig.json +++ b/boilerplates/react-query/tsconfig.json @@ -1,3 +1,10 @@ { - "extends": ["../tsconfig.base.json"] + "extends": ["../tsconfig.base.json"], + "compilerOptions": { + "types": ["vite/client", "@types/node", "vike-react", "@batijs/core/types"], + "jsx": "react-jsx", + "jsxImportSource": "react", + "lib": ["DOM", "DOM.Iterable", "ES2022"], + "baseUrl": "." + } } From 40cf99a4eea90a96d58c958412344ee86152d498 Mon Sep 17 00:00:00 2001 From: Hadi Chahine Date: Wed, 31 Dec 2025 04:51:50 +0400 Subject: [PATCH 4/4] Add image for react query --- packages/features/src/features.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/features/src/features.ts b/packages/features/src/features.ts index b328bd0ba..2183fb0dd 100644 --- a/packages/features/src/features.ts +++ b/packages/features/src/features.ts @@ -287,6 +287,7 @@ export const features = [ label: "React Query", flag: "react-query", dependsOn: ["react"], + image: "https://tanstack.com/images/logos/logo-color-100.png", url: "https://tanstack.com/query", tagline: "Powerful asynchronous state management, server-state utilities and data fetching", repo: "tanstack/query",