Add react query devtools

front/apps/web/package.json

@@ -20,6 +20,7 @@
 		"@material-symbols/svg-400": "^0.14.1",
 		"@radix-ui/react-dropdown-menu": "^2.0.6",
 		"@tanstack/react-query": "^5.12.1",
+		"@tanstack/react-query-devtools": "^5.12.2",
 		"array-shuffle": "^3.0.0",
 		"expo-linear-gradient": "^12.5.0",
 		"expo-modules-core": "^1.5.12",

front/apps/web/src/pages/_app.tsx

@@ -21,6 +21,7 @@
 import "../polyfill";
 
 import { HydrationBoundary, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { HiddenIfNoJs, SkeletonCss, ThemeSelector } from "@kyoo/primitives";
 import { WebTooltip } from "@kyoo/primitives/src/tooltip.web";
 import {
@@ -153,6 +154,7 @@ const App = ({ Component, pageProps }: AppProps) => {
 							</ThemeSelector>
 						</HydrationBoundary>
 					</AccountProvider>
+					<ReactQueryDevtools initialIsOpen={false} />
 				</QueryClientProvider>
 			</>
 		</YoshikiDebug>

front/packages/models/src/query.tsx

@@ -23,7 +23,6 @@ import {
 	dehydrate,
 	QueryClient,
 	QueryFunctionContext,
-	QueryOptions,
 	useInfiniteQuery,
 	useQuery,
 } from "@tanstack/react-query";
@@ -37,8 +36,8 @@ const kyooUrl =
 	Platform.OS !== "web"
 		? process.env.PUBLIC_BACK_URL
 		: typeof window === "undefined"
-		  ? process.env.KYOO_URL ?? "http://localhost:5000"
+		? process.env.KYOO_URL ?? "http://localhost:5000"
-		  : "/api";
+		: "/api";
 
 export let kyooApiUrl: string | null = kyooUrl || null;
 
@@ -72,8 +71,8 @@ export const queryFn = async <Data,>(
 			"path" in context
 				? (context.path.filter((x) => x) as string[])
 				: "pageParam" in context && context.pageParam
-				  ? [context.pageParam as string]
+				? [context.pageParam as string]
-				  : (context.queryKey.filter((x, i) => x && i) as string[]),
+				: (context.queryKey.filter((x) => x) as string[]),
 		)
 		.join("/")
 		.replace("/?", "?");
@@ -180,11 +179,8 @@ export type QueryPage<Props = {}, Items = unknown> = ComponentType<
 };
 
 const toQueryKey = <Data, Ret>(query: QueryIdentifier<Data, Ret>) => {
-	const prefix = Platform.OS !== "web" ? [kyooApiUrl] : [""];
-
 	if (query.params) {
 		return [
-			...prefix,
 			...query.path,
 			"?" +
 				Object.entries(query.params)
@@ -193,7 +189,7 @@ const toQueryKey = <Data, Ret>(query: QueryIdentifier<Data, Ret>) => {
 					.join("&"),
 		];
 	} else {
-		return [...prefix, ...query.path];
+		return query.path;
 	}
 };
 

front/packages/ui/src/components/watchlist-info.tsx

@@ -18,7 +18,7 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { Icon, IconButton, tooltip } from "@kyoo/primitives";
+import { IconButton, tooltip } from "@kyoo/primitives";
 import { ComponentProps } from "react";
 import { useTranslation } from "react-i18next";
 import BookmarkAdd from "@material-symbols/svg-400/rounded/bookmark_add.svg";

front/packages/ui/src/details/movie.tsx

@@ -27,9 +27,9 @@ import { DetailsCollections } from "./collection";
 
 const query = (slug: string): QueryIdentifier<Movie> => ({
 	parser: MovieP,
-	path: ["movies", slug],
+	path: ["movie", slug],
 	params: {
-		fields: ["studio"],
+		fields: ["studio", "watchStatus"],
 	},
 });
 

front/packages/ui/src/details/season.tsx

@@ -90,7 +90,7 @@ export const SeasonHeader = ({
 
 SeasonHeader.query = (slug: string): QueryIdentifier<Season, SeasonProcessed> => ({
 	parser: SeasonP,
-	path: ["shows", slug, "seasons"],
+	path: ["show", slug, "seasons"],
 	params: {
 		// Fetch all seasons at one, there won't be hundred of thems anyways.
 		limit: 0,
@@ -159,7 +159,7 @@ EpisodeList.query = (
 	season: string | number,
 ): QueryIdentifier<Episode, Episode & { firstOfSeason?: boolean }> => ({
 	parser: EpisodeP,
-	path: ["shows", slug, "episode"],
+	path: ["show", slug, "episode"],
 	params: {
 		seasonNumber: season ? `gte:${season}` : undefined,
 	},

front/packages/ui/src/details/show.tsx

@@ -81,9 +81,9 @@ const ShowHeader = forwardRef<View, ViewProps & { slug: string }>(function ShowH
 
 const query = (slug: string): QueryIdentifier<Show> => ({
 	parser: ShowP,
-	path: ["shows", slug],
+	path: ["show", slug],
 	params: {
-		fields: ["studio", "firstEpisode"],
+		fields: ["studio", "firstEpisode", "watchStatus"],
 	},
 });
 

front/packages/ui/src/details/staff.tsx

@@ -50,6 +50,6 @@
 //
 // Staff.query = (slug: string): QueryIdentifier<Person> => ({
 // 	parser: PersonP,
-// 	path: ["shows", slug, "people"],
+// 	path: ["show", slug, "people"],
 // 	infinite: true,
 // });

front/yarn.lock

@@ -4541,6 +4541,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/query-devtools@npm:5.12.1":
+  version: 5.12.1
+  resolution: "@tanstack/query-devtools@npm:5.12.1"
+  checksum: 1956ef3edb9f54bae2c80a0a6ffbdcfe9167078f187d05db42a507675e6099857f41f1a5523eeed27dd3e1d2f878c6cf14c5912313823ed49532e210eaf3492a
+  languageName: node
+  linkType: hard
+
+"@tanstack/react-query-devtools@npm:^5.12.2":
+  version: 5.12.2
+  resolution: "@tanstack/react-query-devtools@npm:5.12.2"
+  dependencies:
+    "@tanstack/query-devtools": 5.12.1
+  peerDependencies:
+    "@tanstack/react-query": ^5.12.2
+    react: ^18.0.0
+  checksum: b08093902d3ae000d4a9d90d249dc9bad9be56d1a84dc0c1ae2784a054c61582a66a8b26db2cb15cd2c160950027ffea253113869ac2fb74f7c82619960d6bdb
+  languageName: node
+  linkType: hard
+
 "@tanstack/react-query@npm:^5.12.1":
   version: 5.12.1
   resolution: "@tanstack/react-query@npm:5.12.1"
@@ -15153,6 +15172,7 @@ __metadata:
     "@radix-ui/react-dropdown-menu": ^2.0.6
     "@svgr/webpack": ^8.1.0
     "@tanstack/react-query": ^5.12.1
+    "@tanstack/react-query-devtools": ^5.12.2
     "@types/node": 20.10.1
     "@types/react": 18.2.39
     "@types/react-dom": 18.2.17