TanStackT
TanStack•2mo ago•
2 replies
ordinary-sapphire

On-Demand Sync Mode w/ Electric Collections

I have some Electric Collections using the API proxy setup:

import { ELECTRIC_PROTOCOL_QUERY_PARAMS } from "@electric-sql/client"
import { createFileRoute } from "@tanstack/react-router"

import { getElectricShapeUrl } from "~/web/lib/config"

const serve = async ({ request }: { request: Request }) => {

  const url = new URL(request.url)
  const originUrl = new URL(getElectricShapeUrl())

  url.searchParams.forEach((value, key) => {
    if (ELECTRIC_PROTOCOL_QUERY_PARAMS.includes(key)) {
      originUrl.searchParams.set(key, value)
    }
  })

  originUrl.searchParams.set("table", "users")
  )

  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, {
    headers,
    status: response.status,
    statusText: response.statusText,
  })
}


if I add syncMode: "on-demand" to my collection config, I get an error like this:

11:20:04.453 Uncaught (in promise) FetchError: HTTP Error 400 at .../api/electric/admin/users?cursor=&handle=104219484-1763462903658924&log=changes_only&offset=124979816_1862&subset__limit=21&subset__order_by=%22created_at%22+DESC+NULLS+FIRST&subset__params%5B1%5D=true&subset__where=%22email_verified%22+%3D+%241: {"message":"Invalid request","errors":{"subset":{"where":["At location 19: parameter $1 was not provided"]}}}
    _FetchError error.ts:15
    fromResponse error.ts:44


I have to add smth like 

  url.searchParams.forEach((value, key) => {
    // Pass through Electric protocol params and subset params for on-demand mode
    if (
      ELECTRIC_PROTOCOL_QUERY_PARAMS.includes(key)
      // ||
      // key.startsWith("subset__")
    ) {
      originUrl.searchParams.set(key, value)
    }
  })


to make it work
Was this page helpful?