diff --git a/package-lock.json b/package-lock.json index 84c0b3e7..039ddabb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,8 @@ "name": "wine", "version": "0.1.0", "dependencies": { + "@tanstack/react-query": "^5.90.2", + "@tanstack/react-query-devtools": "^5.90.2", "axios": "^1.12.2", "clsx": "^2.1.1", "next": "^15.5.2", @@ -3754,6 +3756,59 @@ "url": "https://github.com/sponsors/gregberge" } }, + "node_modules/@tanstack/query-core": { + "version": "5.90.2", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.2.tgz", + "integrity": "sha512-k/TcR3YalnzibscALLwxeiLUub6jN5EDLwKDiO7q5f4ICEoptJ+n9+7vcEFy5/x/i6Q+Lb/tXrsKCggf5uQJXQ==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/query-devtools": { + "version": "5.90.1", + "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.90.1.tgz", + "integrity": "sha512-GtINOPjPUH0OegJExZ70UahT9ykmAhmtNVcmtdnOZbxLwT7R5OmRztR5Ahe3/Cu7LArEmR6/588tAycuaWb1xQ==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/react-query": { + "version": "5.90.2", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.2.tgz", + "integrity": "sha512-CLABiR+h5PYfOWr/z+vWFt5VsOA2ekQeRQBFSKlcoW6Ndx/f8rfyVmq4LbgOM4GG2qtxAxjLYLOpCNTYm4uKzw==", + "license": "MIT", + "dependencies": { + "@tanstack/query-core": "5.90.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^18 || ^19" + } + }, + "node_modules/@tanstack/react-query-devtools": { + "version": "5.90.2", + "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.90.2.tgz", + "integrity": "sha512-vAXJzZuBXtCQtrY3F/yUNJCV4obT/A/n81kb3+YqLbro5Z2+phdAbceO+deU3ywPw8B42oyJlp4FhO0SoivDFQ==", + "license": "MIT", + "dependencies": { + "@tanstack/query-devtools": "5.90.1" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "@tanstack/react-query": "^5.90.2", + "react": "^18 || ^19" + } + }, "node_modules/@testing-library/dom": { "version": "10.4.0", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", diff --git a/package.json b/package.json index 1fe5f898..595cceef 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,8 @@ "chromatic": "chromatic --exit-zero-on-changes" }, "dependencies": { + "@tanstack/react-query": "^5.90.2", + "@tanstack/react-query-devtools": "^5.90.2", "axios": "^1.12.2", "clsx": "^2.1.1", "next": "^15.5.2", diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 78346329..dde9abb2 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,6 +1,7 @@ import type { Metadata } from "next"; import { sfPro } from "./fonts"; import "./globals.css"; +import QueryProvider from "@/providers/query-provider"; export const metadata: Metadata = { title: "Wine App", @@ -14,7 +15,9 @@ export default function RootLayout({ }>) { return ( - {children} + + {children} + ); } diff --git a/src/app/page.tsx b/src/app/page.tsx index 57275851..13524fdb 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,4 +1,25 @@ +"use client"; + +import { useQuery } from "@tanstack/react-query"; + +interface Post { + userId: number; + id: number; + title: string; + body: string; +} + +const fetchPost = async (): Promise => { + const response = await fetch("https://jsonplaceholder.typicode.com/posts"); + return response.json(); +}; + export default function Home() { + const { data, error, isLoading } = useQuery({ + queryKey: ["posts"], + queryFn: fetchPost, + }); + return (
@@ -190,6 +211,19 @@ export default function Home() {
+ + {/* tanstack query test */} +
+ {isLoading ? ( +

Loading...

+ ) : ( +
+ {data?.map((post) => { + return
Title: {post.title}
; + })} +
+ )} +
); diff --git a/src/providers/query-provider.tsx b/src/providers/query-provider.tsx new file mode 100644 index 00000000..ccc13b0f --- /dev/null +++ b/src/providers/query-provider.tsx @@ -0,0 +1,17 @@ +"use client"; + +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; +import { ReactNode, useState } from "react"; + +const QueryProvider = ({ children }: { children: ReactNode }) => { + const [queryClient] = useState(() => new QueryClient()); + return ( + + {children} + + + ); +}; + +export default QueryProvider;