T
TanStack•2w ago
foreign-sapphire

Fields coming back as snake case from DB

I've been following the tanstackdb-electric-starter pretty heavily for my project and just noticed a weird issue. When my electric collection retrieves fields, it retrieves them snake cased (hello_world)
I am following the same convention as the starter project, using drizzle and zod schema for my collection's schemas. 
export const selectMessageSchema = createSelectSchema(messages, {
    content: z.string().min(1),
});
export function createElectricChatCollection(
    args: CreateChatCollectionArgs = { id: "messages" },
) {
    const table = "messages";
    const id = args.id;
    const where = buildWhereClause(args);

    return createCollection(
        electricCollectionOptions({
            id: id,
            shapeOptions: {
                url: new URL("api/electric", env.VITE_STOA_URL).toString(),
                params: {
                    table,
                    ...(where ? { where } : {}),
                },
                parser: {
                    timestamptz: (date: string) => {
                        return new Date(date);
                    },
                },
            },
            getKey: (item) => item.id,
            schema: selectMessageSchema,
            onInsert: async ({ transaction }) => {
                const { modified: newMessage } = transaction.mutations[0];
                const result = await orpc.clientChat.create.call({
                    clientId: newMessage.clientId,
                    senderId: newMessage.senderId,
                    content: newMessage.content,
                });
                return { txid: result.txId };
            },
        }),
    );
}
export const selectMessageSchema = createSelectSchema(messages, {
    content: z.string().min(1),
});
export function createElectricChatCollection(
    args: CreateChatCollectionArgs = { id: "messages" },
) {
    const table = "messages";
    const id = args.id;
    const where = buildWhereClause(args);

    return createCollection(
        electricCollectionOptions({
            id: id,
            shapeOptions: {
                url: new URL("api/electric", env.VITE_STOA_URL).toString(),
                params: {
                    table,
                    ...(where ? { where } : {}),
                },
                parser: {
                    timestamptz: (date: string) => {
                        return new Date(date);
                    },
                },
            },
            getKey: (item) => item.id,
            schema: selectMessageSchema,
            onInsert: async ({ transaction }) => {
                const { modified: newMessage } = transaction.mutations[0];
                const result = await orpc.clientChat.create.call({
                    clientId: newMessage.clientId,
                    senderId: newMessage.senderId,
                    content: newMessage.content,
                });
                return { txid: result.txId };
            },
        }),
    );
}
It's not like a huge deal, but type-safety is gone now
GitHub
electric/examples/tanstack-db-web-starter at main · electric-sql/e...
Real-time sync for Postgres. Contribute to electric-sql/electric development by creating an account on GitHub.
No description
2 Replies
conscious-sapphire
conscious-sapphire•2w ago
electric is just returning whatevers in your db you can have your types generated w/ snake_case (that's how the starter works) or you can have camelCase types & transform all the data (like drizzle would internally for queries) I just use snake_case 🤷
foreign-sapphire
foreign-sapphireOP•2w ago
That’s what I thought! How do you set this up? The starter has a snake case parameter in the db connection but I don’t see anything else making the types be generated as snake case oh wait nvm, you just have the fields as snake case... ill adjust

Did you find this page helpful?