Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(guides/hello/filter): update for app namespace 🚗 #2858

Merged
merged 6 commits into from
May 23, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 10 additions & 13 deletions docs/pages/guides/hello-world/filter-sync.mdx
Original file line number Diff line number Diff line change
@@ -17,12 +17,11 @@ To see the effects of filtering we need a table with entries to filter. To get s
Edit `packages/client/src/mud/setupNetwork.ts`.

- Import [`pad`](https://viem.sh/docs/utilities/pad.html) from viem.
- Import [`resourceToHex`](https://github.com/latticexyz/mud/blob/main/packages/common/src/resourceToHex.ts) to create resource identifiers.
- Add a `filters` field to the `syncToRecs` call.

<CollapseCode>

```ts filename="setupNetwork.ts" copy showLineNumbers {24-25,95-107}
```ts filename="setupNetwork.ts" copy showLineNumbers {23,93-105}
/*
* The MUD client code is built on top of viem
* (https://viem.sh/docs/getting-started.html).
@@ -35,7 +34,6 @@ import {
http,
createWalletClient,
Hex,
parseEther,
ClientConfig,
getContract,
} from "viem";
@@ -46,7 +44,6 @@ import { world } from "./world";
import IWorldAbi from "contracts/out/IWorld.sol/IWorld.abi.json";
import { createBurnerAccount, transportObserver, ContractWrite } from "@latticexyz/common";
import { transactionQueue, writeObserver } from "@latticexyz/common/actions";
import { resourceToHex } from "@latticexyz/common";
import { pad } from "viem";

import { Subject, share } from "rxjs";
@@ -119,14 +116,14 @@ export async function setupNetwork() {
startBlock: BigInt(networkConfig.initialBlockNumber),
filters: [
{
tableId: resourceToHex({ type: "table", namespace: "", name: "Counter" }),
tableId: mudConfig.tables.app__Counter.tableId,
},
{
tableId: resourceToHex({ type: "table", namespace: "", name: "History" }),
tableId: mudConfig.tables.app__History.tableId,
key0: pad("0x01"),
},
{
tableId: resourceToHex({ type: "table", namespace: "", name: "History" }),
tableId: mudConfig.tables.app__History.tableId,
key0: pad("0x05"),
},
],
@@ -150,7 +147,7 @@ export async function setupNetwork() {
</CollapseCode>

Click **Increment** a few times to see you only see the history for counter values 1 and 5.
You can also go to the MUD Dev Tools and see that when you select **Components > History** it only has those lines.
You can also go to the MUD Dev Tools and see that when you select **Components > app\_\_History** it only has those lines.

### Explanation

@@ -159,7 +156,7 @@ Only rows that match at least one line are synchronized.
Each filter is a structure that can have up to three fields, and all the fields that are specified must match a row for the filter to match.

- `tableId`, the table ID to synchronize.
You create this value using [`resourceToHex`](https://github.com/latticexyz/mud/blob/main/packages/common/src/resourceToHex.ts), the type can be either `table`, or `offchainTable`.
You can read this value from `mudConfig.tables`.
- `key0`, the first key value (as a 32 byte hexadecimal string).
- `key1`, the second key value (as a 32 byte hexadecimal string).

@@ -170,21 +167,21 @@ Each filter is a structure that can have up to three fields, and all the fields
```ts
filters: [
{
tableId: resourceToHex({ type: "table", namespace: "", name: "Counter"}),
tableId: mudConfig.tables.app__Counter.tableId,
},
```

The first filter is for the `:Counter` table (`Counter` in the root namespace).
The first filter is for the `app__Counter` table (`Counter` in the `app` namespace).
We don't specify any keys, because we want all the rows of the table.
It's a singleton so there is only one row anyway.

```ts
{
tableId: resourceToHex({ type: "table", namespace: "", name: "History"}),
tableId: mudConfig.tables.app__History.tableId,
key0: pad("0x01"),
},
{
tableId: resourceToHex({ type: "table", namespace: "", name: "History"}),
tableId: mudConfig.tables.app__History.tableId,
key0: pad("0x05"),
},
],