Small cleanup

examples/nextjs-ssr-example/app/Home.tsx

@@ -6,7 +6,7 @@ import "./Example.css"
 import { matchStream } from "./match-stream"
 import { Row, ShapeStreamOptions } from "@electric-sql/client"
 import { useOptimistic } from "react"
-import { getProxiedOptions, getUrl } from "./utils"
+import { getProxiedOptions } from "./utils"
 
 const parser = {
   timestamptz: (date: string) => new Date(date).getTime(),

examples/nextjs-ssr-example/app/page.tsx

@@ -1,13 +1,15 @@
 import React from "react"
 import Home from "./Home"
 import ServerShapeProvider from "./server-shape-provider"
-import { ShapeDefintion } from "./utils"
+import { SerializedShapeOptions } from "./utils"
 
-const itemsShape: ShapeDefintion = {
+const itemsShape: SerializedShapeOptions = {
   table: `items`,
 }
 
 const Page = async () => (
+  // Passes a shape fetched on server to client
+  // and loads it into clients shape cache
   <ServerShapeProvider options={[itemsShape]}>
     <Home />
   </ServerShapeProvider>

examples/nextjs-ssr-example/app/server-shape-provider.tsx

@@ -1,14 +1,14 @@
 import { getSerializedShape } from "@electric-sql/react"
 import React from "react"
 import ClientShapeProvider from "./client-shapes-provider"
-import { getUrl, SerializedShape, ShapeDefintion } from "./utils"
+import { getUrl, SerializedShape, SerializedShapeOptions } from "./utils"
 
 export default function ServerShapeProvider({
   children,
   options,
 }: {
   children: React.JSX.Element
-  options: ShapeDefintion[]
+  options: SerializedShapeOptions[]
 }) {
   const clientShapes: SerializedShape[] = []
   for (const shapeOptions of options) {

examples/nextjs-ssr-example/app/utils.ts

@@ -1,23 +1,9 @@
-import {
-  Offset,
-  Shape,
-  ShapeData,
-  ShapeStreamOptions,
-} from "@electric-sql/client/*"
+import { ShapeData, ShapeStreamOptions } from "@electric-sql/client/*"
 
-export type ShapeDefintion = {
-  table: string
-  columns?: string[]
-  where?: string
-}
-
-export type ShapeDefinitionWithPosiotion = ShapeDefintion & {
-  offset: Offset
-  shapeHandle: string | undefined
-}
+export type SerializedShapeOptions = Omit<ShapeStreamOptions, `url`>
 
 export type SerializedShape = {
-  options: ShapeDefinitionWithPosiotion
+  options: SerializedShapeOptions
   data: ShapeData
 }
 
@@ -29,7 +15,7 @@ export function getUrl() {
 }
 
 export function getProxiedOptions(
-  options: Omit<ShapeStreamOptions, "url">
+  options: SerializedShapeOptions
 ): ShapeStreamOptions {
   // ensure shape is not syncing on the server
   const serverOptions: Partial<ShapeStreamOptions> = {}

packages/react-hooks/src/react-hooks.tsx

@@ -31,13 +31,15 @@ export async function preloadShape<T extends Row<unknown> = Row>(
 }
 
 export function sortedOptionsHash<T>(options: ShapeStreamOptions<T>): string {
-  // Filter options that uniquely identify the shape. DISCUSS BEFORE MERGING
+  // Filter options that uniquely identify the shape.
   const uniqueShapeOptions = {
     url: options.url,
     table: options.table,
     columns: options.columns,
     where: options.where,
+    databaseId: options.databaseId,
     headers: options.headers,
+    replica: options.replica,
   }
   return JSON.stringify(uniqueShapeOptions, Object.keys(options).sort())
 }