Nabrams docs add gel integration #8000
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,240 @@ | ||
| --- | ||
| title: Gel | Integrations | ||
| keywords: 'Gel, EdgeDB, database, data, postgres' | ||
| contributors: | ||
| - nabrams | ||
| updated_at: '2025-10-10T18:53:23Z' | ||
| created_at: '2025-08-01T23:00:50Z' | ||
| --- | ||
|
|
||
| import PackageManagerTabs from '~/components/package-manager-tabs/index.tsx'; | ||
|
|
||
| # Gel Data | ||
|
|
||
| [GelDB](https://www.geldata.com/) Gel is a scalable, integrated data platform on top of Postgres. | ||
|
|
||
| Gel gives the relational model a fresh facelift, solves n+1, simplifies migrations, and streamlines your entire database workflow. | ||
|
|
||
| Gel can be used in Qwik with `routeLoader$`, `routeAction$` and `server$` functions. These are Qwik APIs to allow code to execute only on the server-side. | ||
|
|
||
| The simplest way to add Gel to your Qwik project is by running the Qwik CLI command. This will automatically install all necessary dependencies, set up a basic schema in the `dbschema` folder, and generate a `queries` directory to help you start building your own API queries. Additionally, it will scaffold an `actions` folder with example routes and files, giving you a ready-to-use foundation for working with Gel in your app. | ||
|
|
||
| It will also create a `gel.toml` file to configure the gel instance. Everything you need to start building your app with Gel is there. | ||
|
|
||
| <PackageManagerTabs> | ||
| <span q:slot="pnpm"> | ||
|
|
||
| ```shell | ||
| pnpm run qwik add gel | ||
| ``` | ||
| </span> | ||
| <span q:slot="npm"> | ||
| ```shell | ||
| npm run qwik add gel | ||
| ``` | ||
| </span> | ||
| <span q:slot="yarn"> | ||
| ```shell | ||
| yarn run qwik add gel | ||
| ``` | ||
| </span> | ||
| <span q:slot="bun"> | ||
| ```shell | ||
| bun run qwik add gel | ||
| ``` | ||
| </span> | ||
| </PackageManagerTabs> | ||
|
|
||
| > Gel is a modern data platform built on PostgreSQL that provides a unified interface for managing, querying, and scaling your data. It offers features like real-time analytics, seamless migrations, and integrated workflows to simplify database operations for developers and teams. | ||
|
|
||
| ## Auto-generating queries | ||
|
|
||
| Gel lets you automatically generate queries for your database schema by using their query language EdgeQL. | ||
| It is already installed for you and you can use the following scripts to utilize it: | ||
|
|
||
| *** Before you start, make sure you have run the following command: | ||
| ```shell | ||
| pnpm gel:generate:queries && | ||
| pnpm gel:generate:types | ||
| ``` | ||
|
|
||
| The following `<generator>`s are currently supported: | ||
|
|
||
| - Command: `gel:generate:queries` > | ||
| - `queries`: Generate typed functions from *.edgeql files | ||
| - Command: `gel:generate:types` > | ||
| - `interfaces`: Generate interfaces for your schema types | ||
| - `edgeql-js`: Generate the query builder | ||
|
|
||
|
|
||
|
|
||
| ## Gel UI | ||
|
|
||
| You can also use the Gel UI to view and edit your database schema, query your data, among other things. | ||
| To do so, run the following command: | ||
| <PackageManagerTabs> | ||
| <span q:slot="pnpm"> | ||
|
|
||
| ```shell | ||
| pnpm gel:ui | ||
| ``` | ||
| </span> | ||
| <span q:slot="npm"> | ||
| ```shell | ||
| npm gel:ui | ||
| ``` | ||
| </span> | ||
| <span q:slot="yarn"> | ||
| ```shell | ||
| yarn gel:ui | ||
| ``` | ||
| </span> | ||
| <span q:slot="bun"> | ||
| ```shell | ||
| bun gel:ui | ||
| ``` | ||
| </span> | ||
| </PackageManagerTabs> | ||
|
|
||
| ## Client user actions | ||
|
|
||
| We will use these client actions to query and insert users in the DB below. | ||
|
|
||
| ```tsx {7} /Gel/ title="src/actions/client.tsx" | ||
| import { server$ } from "@builder.io/qwik-city"; | ||
| import { executeQuery } from "../../actions/client"; | ||
| import * as queries from "../../../dbschema/queries"; | ||
|
|
||
| export const getAllUsers = server$(async () => { | ||
| return await executeQuery(queries.getAllUsers); | ||
| }); | ||
|
|
||
| export const insertUser = server$( | ||
| async (name: string, email: string, has_profile: boolean) => { | ||
| return await executeQuery(queries.insertUser, { | ||
| name: name, | ||
| email: email, | ||
| has_profile: has_profile, | ||
| }); | ||
| }, | ||
| ); | ||
| ``` | ||
|
|
||
| ## Listing users | ||
|
|
||
| We will use `routeLoader$` to query all users in the DB, and return the result. | ||
|
|
||
| ```tsx {7} /Gel/ title="src/routes/users/index.tsx" | ||
|
|
||
| import { component$ } from "@builder.io/qwik"; | ||
| import { routeLoader$ } from "@builder.io/qwik-city"; | ||
| import { getAllUsers } from "../../actions/user"; | ||
|
|
||
| export const useGetAllUsers = routeLoader$(async () => { | ||
| const users = await getAllUsers(); | ||
| return users; | ||
| }); | ||
|
|
||
| export default component$(() => { | ||
| const users = useGetAllUsers().value; | ||
|
|
||
| return ( | ||
| <section> | ||
| <h1>Users Directory</h1> | ||
| <ul> | ||
| {Array.isArray(users) && users.length > 0 ? ( | ||
| users.map((user: any) => ( | ||
| <li key={user.id ?? user.name}> | ||
| <b>Name:</b> {user.name} | ||
| {user.email && ( | ||
| <div style={{ marginLeft: "1rem" }}> | ||
| <span> | ||
| <b>Email:</b> {user.email} | ||
| </span> | ||
| </div> | ||
| )} | ||
| </li> | ||
| )) | ||
| ) : ( | ||
| <li>No users found.</li> | ||
| )} | ||
| </ul> | ||
| </section> | ||
| ); | ||
| }); | ||
|
|
||
|
|
||
| ``` | ||
|
|
||
| ## Adding users | ||
|
|
||
| We will use `routeAction$` and `zod$` form to create user. | ||
|
|
||
| ```tsx {7} /Gel/ title="src/routes/users/index.tsx" | ||
|
|
||
| import { component$ } from "@builder.io/qwik"; | ||
| import { routeAction$, zod$, z, Form } from "@builder.io/qwik-city"; | ||
| import { insertUser } from "../../actions/user"; | ||
|
|
||
| export const useCreateUser = routeAction$( | ||
| async ({ name, email }) => { | ||
| const user = await insertUser(name, email, true); | ||
| if (!user) | ||
| return { error: "A user already exists with that email.", user: null }; | ||
| return { error: null, user }; | ||
| }, | ||
| zod$({ | ||
| name: z.string().min(1, { message: "Name is required" }), | ||
| email: z.string().email({ message: "Invalid email address" }), | ||
| }), | ||
| ); | ||
|
|
||
| export default component$(() => { | ||
| const action = useCreateUser(); | ||
| const errors = action.value?.fieldErrors; | ||
| const customError = action.value?.error; | ||
|
|
||
| return ( | ||
| <section> | ||
| <h1>Create User</h1> | ||
| <Form action={action}> | ||
| <label> | ||
| Name | ||
| <input name="name" value={action.formData?.get("name") ?? ""} /> | ||
| </label> | ||
| <label> | ||
| <input name="email" value={action.formData?.get("email") ?? ""} /> | ||
| </label> | ||
| <button type="submit">Create</button> | ||
| </Form> | ||
| {action.value?.user && <h2>User created successfully!</h2>} | ||
| {(errors || customError) && ( | ||
| <div style={{ color: "red" }}> | ||
| {errors?.name && ( | ||
| <div> | ||
| <h2>{errors.name}</h2> | ||
| </div> | ||
| )} | ||
| {errors?.email && ( | ||
| <div> | ||
| <h2>{errors.email}</h2> | ||
| </div> | ||
| )} | ||
| {customError && ( | ||
| <div> | ||
| <h2>{customError}</h2> | ||
| </div> | ||
| )} | ||
| </div> | ||
| )} | ||
| </section> | ||
| ); | ||
| }); | ||
|
|
||
| ``` | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Member
There was a problem hiding this comment. also revert this, prettier seems to sort it like this but order is important |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can you run
pnpm api.update? Unfortunately in v1 this happens all the time.