Tanstack DB + Neon + ElectricSQL (Cloud) | TanStack | Page 1

not sure if i setup correctly.
so i have the following code , but when i go to the page,

userCollection

export const userCollection = createCollection(
  electricCollectionOptions({
    id: `users`,
    schema: selectUserSchema,
    shapeOptions: {
      url: new URL("/api/users", typeof window !== `undefined`
          ? window.location.origin
          : `http://localhost:3000`).toString()
    },
    getKey: (user) => user.id
  })
)```
`selectUserSchema = createSelectSchema(users)` users is drizzle schema 
...

for /api/users

import { createFileRoute } from "@tanstack/react-router"
import { prepareElectricUrl, proxyElectricRequest } from "@/lib/electric-proxy"

export function prepareElectricUrl(requestUrl: string): URL {
  const url = new URL(requestUrl)
  const electricUrl = getElectricUrl()
  const originUrl = new URL(`${electricUrl}/v1/shape`)

  // Copy Electric-specific query params
  url.searchParams.forEach((value, key) => {
    if (ELECTRIC_PROTOCOL_QUERY_PARAMS.includes(key)) {
      originUrl.searchParams.set(key, value)
    }
  })

  // Add Electric Cloud authentication if configured
  if (process.env.ELECTRIC_SOURCE_ID && process.env.ELECTRIC_SECRET) {
    originUrl.searchParams.set(`source_id`, process.env.ELECTRIC_SOURCE_ID)
    originUrl.searchParams.set(`secret`, process.env.ELECTRIC_SECRET)
    originUrl.searchParams.set(`offset`, "-1")
  }
  console.log(originUrl)
  return originUrl
}

export async function proxyElectricRequest(originUrl: URL): Promise<Response> {
  const response = await fetch(originUrl)
  const headers = new Headers(response.headers)
  headers.delete(`content-encoding`)
  headers.delete(`content-length`)
  headers.set(`vary`, `cookie`)

  return new Response(response.body, {
    status: response.status,
    statusText: response.statusText,
    headers,
  })
}

const serve = async ({ request }: { request: Request }) => {
  const originUrl = prepareElectricUrl(request.url)
  originUrl.searchParams.set(`table`, `users`)
  return proxyElectricRequest(originUrl)
}

export const Route = createFileRoute(`/api/users`)({
  server: {
    handlers: {
      GET: serve,
    },
  },
})

page.tsx

const [searchTerm, setSearchTerm] = useState("");
const {data: users} = useLiveQuery(
    (q) => q.from({userCollection})
  , [searchTerm]);```

however, users are empty and the app spam the request to /api/users
can someone help please 🙏 thanks.

#Tanstack DB + Neon + ElectricSQL (Cloud)