docs: add electric-collection reference page#429
Conversation
🦋 Changeset detectedLatest commit: f88cf4d The changes in this PR will be included in the next version bump. This PR includes changesets to release 8 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
More templates
@tanstack/db
@tanstack/db-ivm
@tanstack/electric-db-collection
@tanstack/query-db-collection
@tanstack/react-db
@tanstack/solid-db
@tanstack/svelte-db
@tanstack/trailbase-db-collection
@tanstack/vue-db
commit: |
|
Size Change: 0 B Total Size: 62.5 kB ℹ️ View Unchanged
|
|
Size Change: 0 B Total Size: 1.16 kB ℹ️ View Unchanged
|
KyleAMathews
left a comment
KyleAMathews
left a comment
There was a problem hiding this comment.
Thanks for picking this up!
| const todosCollection = createCollection( | ||
| electricCollectionOptions({ | ||
| shapeOptions: { | ||
| url: 'https://example.com/v1/shape', |
There was a problem hiding this comment.
Let's used named routes and not put that table as a param
| ### Shape Options | ||
|
|
||
| - `url`: The URL to your Electric sync service | ||
| - `params`: Shape parameters including: |
There was a problem hiding this comment.
Same, let's not document this as the normal pattern. Show adding these in the proxy.
There was a problem hiding this comment.
I've added the proxy example and mention the other shape parameters there
|
|
||
| ## Persistence Handlers | ||
|
|
||
| You can define handlers that are called when mutations occur, for instance to persist changes to your backend. Such handlers **must return a transaction ID** (`txid`) to track when the mutation has been synchronized back from Electric: |
There was a problem hiding this comment.
Txid is recommended but there are already other ways of doing this and we'll be adding more
There was a problem hiding this comment.
It's good to explain why this is ideal for sync matching
There was a problem hiding this comment.
I've mentioned the alternative approaches and took an example.
| await api.todos.create(item) // API doesn't return txid | ||
|
|
||
| return { | ||
| matchStream: (stream) => matchStream( |
There was a problem hiding this comment.
oh the issue I linked to isn't implemented yet...
There was a problem hiding this comment.
oh, I thought you wanted to document it already. Removed it.
|
|
||
| // the shape parameters | ||
| originUrl.searchParams.set("table", "todos") | ||
| // originUrl.searchParams.set("where", "completed = true") |
There was a problem hiding this comment.
add comment explaining these are other ways you can modify the shape definition
There was a problem hiding this comment.
added comment and linked to the spec. Not sure if links to external sources are permitted.
3 participants
Reference page for electric-collection.
Explains how to configure electric collection and how to do mutations with the transaction Id tracking pattern either with handlers or explicit transactions.