wip

package.json

@@ -13,7 +13,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-query": "^3.39.3"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.8.0",

src/App.tsx

@@ -1,4 +1,18 @@
+import { useQuery } from "react-query"
+
 function App() {
+  const { data, error, isLoading } = useQuery("kicadFiles", async () => {
+    const response = await fetch(
+      "https://kicad-mod-cache.tscircuit.com/kicad_files.json"
+    )
+    if (!response.ok) {
+      throw new Error("Network response was not ok")
+    }
+    return response.json()
+  })
+
+  if (isLoading) return <div>Loading...</div>
+  if (error) return <div>Error: {(error as Error).message}</div>
   return (
     <div className="flex flex-col min-h-screen">
       <header className="p-4">

src/ContextProviders.tsx

@@ -0,0 +1,16 @@
+import { QueryClient, QueryClientProvider } from "react-query"
+import type { ReactNode } from "react"
+
+const queryClient = new QueryClient()
+
+interface Props {
+  children: ReactNode
+}
+
+const ContextProviders = ({ children }: Props) => {
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}
+
+export default ContextProviders

src/main.tsx

@@ -2,9 +2,12 @@ import React from "react"
 import ReactDOM from "react-dom/client"
 import App from "./App.tsx"
 import "./index.css"
+import ContextProviders from "./ContextProviders"
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <App />
+    <ContextProviders>
+      <App />
+    </ContextProviders>
   </React.StrictMode>
 )