Fix: Move deps/devDeps/peerDeps to appropriate location

examples/react/algolia/package.json

@@ -12,15 +12,15 @@
     "@algolia/transporter": "4.17.1",
     "@tanstack/react-query": "^5.0.0-alpha.38",
     "@tanstack/react-query-devtools": "^5.0.0-alpha.38",
-    "algoliasearch": "4.17.1"
+    "algoliasearch": "4.17.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "^5.0.0-alpha.36",
     "@types/react": "^18.2.4",
     "@types/react-dom": "^18.2.4",
     "@vitejs/plugin-react": "^4.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "typescript": "^5.0.4",
     "vite": "^4.2.0"
   },

examples/react/algolia/src/App.tsx

@@ -1,9 +1,9 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
-import "./styles.css";
-import Search from "./Search";
+import './styles.css'
+import Search from './Search'
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient()
 
 export default function App() {
   return (
@@ -13,5 +13,5 @@ export default function App() {
         <Search />
       </div>
     </QueryClientProvider>
-  );
+  )
 }

examples/react/algolia/src/Search.tsx

@@ -1,15 +1,15 @@
-import { useState } from "react";
+import { useState } from 'react'
 
-import SearchResults from "./SearchResults";
+import SearchResults from './SearchResults'
 
 export default function Search() {
-  const [query, setQuery] = useState("");
+  const [query, setQuery] = useState('')
 
   const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    event.preventDefault();
+    event.preventDefault()
     // It is recommended to debounce this event in prod
-    setQuery(event.target.value);
-  };
+    setQuery(event.target.value)
+  }
 
   return (
     <div>
@@ -20,5 +20,5 @@ export default function Search() {
       />
       <SearchResults query={query} />
     </div>
-  );
+  )
 }

examples/react/algolia/src/SearchResults.tsx

@@ -1,16 +1,16 @@
-import useAlgolia from "./useAlgolia";
+import useAlgolia from './useAlgolia'
 
 type Product = {
-  name: string;
-  shortDescription: string;
-  salePrice: number;
-};
+  name: string
+  shortDescription: string
+  salePrice: number
+}
 
 type SearchResultsProps = {
-  query: string;
-};
+  query: string
+}
 
-export default function SearchResults({ query = "" }: SearchResultsProps) {
+export default function SearchResults({ query = '' }: SearchResultsProps) {
   const {
     hits,
     isLoading,
@@ -20,17 +20,17 @@ export default function SearchResults({ query = "" }: SearchResultsProps) {
     isFetchingNextPage,
     fetchNextPage,
   } = useAlgolia<Product>({
-    indexName: "bestbuy",
+    indexName: 'bestbuy',
     query,
     hitsPerPage: 5,
     staleTime: 1000 * 30, // 30s
     gcTime: 1000 * 60 * 15, // 15m
     enabled: !!query,
-  });
+  })
 
-  if (!query) return null;
+  if (!query) return null
 
-  if (isLoading) return <div className="loading">Loading...</div>;
+  if (isLoading) return <div className="loading">Loading...</div>
 
   return (
     <div>
@@ -69,5 +69,5 @@ export default function SearchResults({ query = "" }: SearchResultsProps) {
         )}
       </div>
     </div>
-  );
+  )
 }

examples/react/algolia/src/algolia.ts

@@ -1,38 +1,38 @@
-import algoliasearch from "algoliasearch";
-import { Hit } from "@algolia/client-search";
+import algoliasearch from 'algoliasearch'
+import { Hit } from '@algolia/client-search'
 
 // From Algolia example
 // https://github.com/algolia/react-instantsearch
-const ALGOLIA_APP_ID = "latency";
-const ALGOLIA_SEARCH_API_KEY = "6be0576ff61c053d5f9a3225e2a90f76";
+const ALGOLIA_APP_ID = 'latency'
+const ALGOLIA_SEARCH_API_KEY = '6be0576ff61c053d5f9a3225e2a90f76'
 
 type SearchOptions = {
-  indexName: string;
-  query: string;
-  pageParam: number;
-  hitsPerPage: number;
-};
+  indexName: string
+  query: string
+  pageParam: number
+  hitsPerPage: number
+}
 
 export async function search<TData>({
   indexName,
   query,
   pageParam,
   hitsPerPage = 10,
 }: SearchOptions): Promise<{
-  hits: Hit<TData>[];
-  nextPage: number | undefined;
+  hits: Hit<TData>[]
+  nextPage: number | undefined
 }> {
-  const client = algoliasearch(ALGOLIA_APP_ID, ALGOLIA_SEARCH_API_KEY);
-  const index = client.initIndex(indexName);
+  const client = algoliasearch(ALGOLIA_APP_ID, ALGOLIA_SEARCH_API_KEY)
+  const index = client.initIndex(indexName)
 
-  console.log("alogolia:search", { indexName, query, pageParam, hitsPerPage });
+  console.log('alogolia:search', { indexName, query, pageParam, hitsPerPage })
 
   const { hits, page, nbPages } = await index.search<TData>(query, {
     page: pageParam,
     hitsPerPage,
-  });
+  })
 
-  const nextPage = page + 1 < nbPages ? page + 1 : undefined;
+  const nextPage = page + 1 < nbPages ? page + 1 : undefined
 
-  return { hits, nextPage };
+  return { hits, nextPage }
 }

examples/react/algolia/src/index.tsx

@@ -1,6 +1,6 @@
-import ReactDOM from "react-dom/client";
+import ReactDOM from 'react-dom/client'
 
-import App from "./App";
+import App from './App'
 
-const rootElement = document.getElementById("root") as HTMLElement;
-ReactDOM.createRoot(rootElement).render(<App />);
+const rootElement = document.getElementById('root') as HTMLElement
+ReactDOM.createRoot(rootElement).render(<App />)

examples/react/algolia/src/useAlgolia.ts

@@ -1,14 +1,14 @@
-import { useInfiniteQuery } from "@tanstack/react-query";
-import { search } from "./algolia";
+import { useInfiniteQuery } from '@tanstack/react-query'
+import { search } from './algolia'
 
 export type UseAlgoliaOptions = {
-  indexName: string;
-  query: string;
-  hitsPerPage?: number;
-  staleTime?: number;
-  gcTime?: number;
-  enabled?: boolean;
-};
+  indexName: string
+  query: string
+  hitsPerPage?: number
+  staleTime?: number
+  gcTime?: number
+  enabled?: boolean
+}
 
 export default function useAlgolia<TData>({
   indexName,
@@ -19,17 +19,17 @@ export default function useAlgolia<TData>({
   enabled,
 }: UseAlgoliaOptions) {
   const queryInfo = useInfiniteQuery({
-    queryKey: ["algolia", indexName, query, hitsPerPage],
+    queryKey: ['algolia', indexName, query, hitsPerPage],
     queryFn: ({ pageParam }) =>
       search<TData>({ indexName, query, pageParam, hitsPerPage }),
     defaultPageParam: 0,
     getNextPageParam: (lastPage) => lastPage?.nextPage,
     staleTime,
     gcTime,
     enabled,
-  });
+  })
 
-  const hits = queryInfo.data?.pages.map((page) => page.hits).flat();
+  const hits = queryInfo.data?.pages.map((page) => page.hits).flat()
 
-  return { ...queryInfo, hits };
+  return { ...queryInfo, hits }
 }

examples/react/algolia/vite.config.js

@@ -1,6 +1,6 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
 
 export default defineConfig({
   plugins: [react()],
-});
+})