fix: returning API requests to Start example

Author: jherr

templates/react/add-on/start/assets/src/routes/api.demo-names.ts

@@ -0,0 +1,11 @@
+import { createAPIFileRoute } from '@tanstack/react-start/api'
+
+export const APIRoute = createAPIFileRoute('/demo/start/api/names')({
+  GET: async ({ request }) => {
+    return new Response(JSON.stringify(['Alice', 'Bob', 'Charlie']), {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+  },
+})

templates/react/add-on/start/assets/src/routes/demo.start.api-request.tsx.ejs

@@ -0,0 +1,33 @@
+<% if (addOnEnabled['react-query']) { %>
+  import { useQuery } from '@tanstack/react-query'
+  <% } else { %>
+  import { useEffect, useState } from 'react'
+  <% } %>
+  import { createFileRoute } from '@tanstack/react-router'
+  
+  function getNames() {
+    return fetch('/api/demo-names').then((res) => res.json())
+  }
+  
+  export const Route = createFileRoute('/demo/start/api-request')({
+    component: Home,
+  })
+  
+  function Home() {
+    <% if (addOnEnabled['react-query']) { %>
+      const { data: names = [] } = useQuery({
+        queryKey: ['names'],
+        queryFn: getNames,
+      })
+    <% } else { %>
+      const [names, setNames] = useState<Array<string>>([])
+      useEffect(() => {
+        getNames().then(setNames)
+      }, [])
+    <% } %>
+    return (
+      <div className="p-4">
+        <div>{names.join(', ')}</div>
+      </div>
+    )
+  }

templates/react/add-on/start/info.json

@@ -9,6 +9,10 @@
     {
       "url": "/demo/start/server-funcs",
       "name": "Start - Server Functions"
+    },
+    {
+      "url": "/demo/start/api-request",
+      "name": "Start - API Request"
     }
   ]
 }