Update 3rd party db to include Hyperdrive (#23171)

* Update index.mdx

* add hyperdrive to 3rd party integrations

* Apply suggestions from code review

* Apply suggestions from code review

* Update src/content/docs/workers/databases/third-party-integrations/neon.mdx

---------

Co-authored-by: Jun Lee <[email protected]>

Author: thomasgauvin

src/content/docs/hyperdrive/examples/connect-to-mysql/mysql-database-providers/planetscale.mdx

@@ -12,26 +12,4 @@ import { Render } from "~/components";
 
 This example shows you how to connect Hyperdrive to a [PlanetScale](https://planetscale.com/) MySQL database.
 
-## 1. Allow Hyperdrive access
-
-You can connect Hyperdrive to any existing PlanetScale database by creating a new user and fetching your database connection string.
-
-### Planetscale Dashboard
-
-1. Go to the [**PlanetScale dashboard**](https://app.planetscale.com/) and select the database you wish to connect to.
-2. Click **Connect**. Enter `hyperdrive-user` as the password name (or your preferred name) and configure the permissions as desired. Select **Create password**. Note the username and password as they will not be displayed again.
-3. Select **Other** as your language or framework. Note down the database host, database name, database username, and password. You will need these to create a database configuration in Hyperdrive.
-
-With the host, database name, username and password, you can now create a Hyperdrive database configuration.
-
-## 2. Create a database configuration
-
-<Render file="create-hyperdrive-config-mysql" />
-
-:::note
-
-When connecting to a Planetscale database with Hyperdrive, you should use a driver like [node-postgres (pg)](/hyperdrive/examples/connect-to-postgres/postgres-drivers-and-libraries/node-postgres/) or [Postgres.js](/hyperdrive/examples/connect-to-postgres/postgres-drivers-and-libraries/postgres-js/) to connect directly to the underlying database instead of the [Planetscale serverless driver](https://planetscale.com/docs/tutorials/planetscale-serverless-driver). Hyperdrive is optimized for database access for Workers and will perform global connection pooling and fast query routing by connecting directly to your database.
-
-:::
-
-<Render file="create-hyperdrive-config-mysql-next-steps" />
+<Render file="planetscale-partial" />

src/content/docs/hyperdrive/examples/connect-to-postgres/postgres-database-providers/neon.mdx

@@ -12,27 +12,4 @@ import { Render } from "~/components";
 
 This example shows you how to connect Hyperdrive to a [Neon](https://neon.tech/) Postgres database.
 
-## 1. Allow Hyperdrive access
-
-You can connect Hyperdrive to any existing Neon database by creating a new user and fetching your database connection string.
-
-### Neon Dashboard
-
-1. Go to the [**Neon dashboard**](https://console.neon.tech/app/projects) and select the project (database) you wish to connect to.
-2. Select **Roles** from the sidebar and select **New Role**. Enter `hyperdrive-user` as the name (or your preferred name) and **copy the password**. Note that the password will not be displayed again: you will have to reset it if you do not save it somewhere.
-3. Select **Dashboard** from the sidebar > go to the **Connection Details** pane > ensure you have selected the **branch**, **database** and **role** (for example,`hyperdrive-user`) that Hyperdrive will connect through.
-4. Select the `psql` and **uncheck the connection pooling** checkbox. Note down the connection string (starting with `postgres://hyperdrive-user@...`) from the text box.
-
-With both the connection string and the password, you can now create a Hyperdrive database configuration.
-
-## 2. Create a database configuration
-
-<Render file="create-hyperdrive-config" />
-
-:::note
-
-When connecting to a Neon database with Hyperdrive, you should use a driver like [node-postgres (pg)](/hyperdrive/examples/connect-to-postgres/postgres-drivers-and-libraries/node-postgres/) or [Postgres.js](/hyperdrive/examples/connect-to-postgres/postgres-drivers-and-libraries/postgres-js/) to connect directly to the underlying database instead of the [Neon serverless driver](https://neon.tech/docs/serverless/serverless-driver). Hyperdrive is optimized for database access for Workers and will perform global connection pooling and fast query routing by connecting directly to your database.
-
-:::
-
-<Render file="create-hyperdrive-config-next-steps" />
+<Render file="neon-partial" />

src/content/docs/hyperdrive/examples/connect-to-postgres/postgres-database-providers/xata.mdx

@@ -12,20 +12,4 @@ import { Render } from "~/components";
 
 This example shows you how to connect Hyperdrive to a Xata PostgreSQL database instance.
 
-## 1. Allow Hyperdrive access
-
-You can connect Hyperdrive to any existing Xata database with the default user and password provided by Xata.
-
-### Xata dashboard
-
-To retrieve your connection string from the Xata dashboard:
-
-1. Go to the [**Xata dashboard**](https://app.xata.io/).
-2. Select the database you want to connect to.
-3. Select **Settings**.
-4. Copy the connection string from the `PostgreSQL endpoint` section and add your API key.
-
-## 2. Create a database configuration
-
-<Render file="create-hyperdrive-config" />
-<Render file="create-hyperdrive-config-next-steps" />
+<Render file="xata-partial" />

src/content/docs/workers/databases/third-party-integrations/index.mdx

@@ -13,10 +13,10 @@ import { DirectoryListing } from "~/components"
 
 Connect to databases by configuring connection strings and credentials as [secrets](/workers/configuration/secrets/) in your Worker. 
 
-:::note[Making multiple round trip calls to a centralized database from a Worker?]
+:::note[Connecting to a regional database from a Worker?]
 
 
-If your Worker is making multiple round trip calls to a centralized database, your Worker may be a good fit for Smart Placement. Smart Placement speeds up applications by automatically running your Worker closer to your back-end infrastructure rather than the end user. Learn more about [how Smart Placement works](/workers/configuration/smart-placement/).
+If your Worker is connecting to a regional database, you can reduce your query latency by using [Hyperdrive](/hyperdrive) and [Smart Placement](/workers/configuration/smart-placement/) which are both included in any Workers plan. Hyperdrive will pool your databases connections globally across Cloudflare's network. Smart Placement will monitor your application to run your Workers closest to your backend infrastructure when this reduces the latency of your Worker invocations. Learn more about [how Smart Placement works](/workers/configuration/smart-placement/).
 :::
 
 ## Database credentials

src/content/docs/workers/databases/third-party-integrations/neon.mdx

@@ -1,15 +1,31 @@
 ---
 pcx_content_type: configuration
 title: Neon
+description: Connect Workers to a Neon Postgres database.
 ---
 
-import { Render, PackageManagers } from "~/components";
+import { Render, PackageManagers, Tabs, TabItem } from "~/components";
 
 [Neon](https://neon.tech/) is a fully managed serverless PostgreSQL. It separates storage and compute to offer modern developer features, such as serverless, branching, and bottomless storage.
 
-## Set up an integration with Neon
+:::note
 
-To set up an integration with Neon:
+You can connect to Neon using [Hyperdrive](/hyperdrive) (recommended), or using the Neon serverless driver, `@neondatabase/serverless`. Both provide connection pooling and reduce the amount of round trips required to create a secure connection from Workers to your database.
+
+Hyperdrive can provide the lowest possible latencies because it performs the database connection setup and connection pooling across Cloudflare's network. Hyperdrive supports native database drivers, libraries, and ORMs, and is included in all [Workers plans](/hyperdrive/platform/pricing/). Learn more about Hyperdrive in [How Hyperdrive Works](/hyperdrive/configuration/how-hyperdrive-works/).
+
+:::
+
+<Tabs>
+	<TabItem label="Hyperdrive (recommended)">
+
+To connect to Neon using [Hyperdrive](/hyperdrive), follow these steps:
+
+         <Render file="neon-partial" product="hyperdrive"/>
+    </TabItem>
+    <TabItem label="Neon serverless driver">
+
+To connect to Neon using `@neondatabase/serverless`, follow these steps:
 
 1. You need to have an existing Neon database to connect to. [Create a Neon database](https://neon.tech/docs/postgres/tutorial-createdb#create-a-table) or [load data from an existing database to Neon](https://neon.tech/docs/import/import-from-postgres).
 
@@ -58,18 +74,21 @@ To set up an integration with Neon:
 6. The following example shows how to make a query to your Neon database in a Worker. The credentials needed to connect to Neon have been added as secrets to your Worker.
 
    ```js
-   import { Client } from '@neondatabase/serverless';
+   import { Client } from "@neondatabase/serverless";
 
    export default {
-     async fetch(request, env, ctx) {
-       const client = new Client(env.DATABASE_URL);
-       await client.connect();
-       const { rows } = await client.query('SELECT * FROM elements');
-       ctx.waitUntil(client.end());  // this doesn’t hold up the response
-
-       return new Response(JSON.stringify(rows));
-     }
-   }
+   	async fetch(request, env, ctx) {
+   		const client = new Client(env.DATABASE_URL);
+   		await client.connect();
+   		const { rows } = await client.query("SELECT * FROM elements");
+   		ctx.waitUntil(client.end()); // this doesn’t hold up the response
+
+   		return new Response(JSON.stringify(rows));
+   	},
+   };
    ```
 
 To learn more about Neon, refer to [Neon's official documentation](https://neon.tech/docs/introduction).
+
+   </TabItem>
+</Tabs>

src/content/docs/workers/databases/third-party-integrations/planetscale.mdx

@@ -3,10 +3,27 @@ pcx_content_type: configuration
 title: PlanetScale
 ---
 
-import { Render, PackageManagers } from "~/components";
+import { Render, PackageManagers, Tabs, TabItem } from "~/components";
 
 [PlanetScale](https://planetscale.com/) is a MySQL-compatible platform that makes databases infinitely scalable, easier and safer to manage.
 
+:::note
+
+You can connect to PlanetScale using [Hyperdrive](/hyperdrive) (recommended), or using the PlanetScale serverless driver, `@planetscale/database`. Both provide connection pooling and reduce the amount of round trips required to create a secure connection from Workers to your database.
+
+Hyperdrive can provide lower latencies because it performs the database connection setup and connection pooling across Cloudflare's network. Hyperdrive supports native database drivers, libraries, and ORMs, and is included in all [Workers plans](/hyperdrive/platform/pricing/). Learn more about Hyperdrive in [How Hyperdrive Works](/hyperdrive/configuration/how-hyperdrive-works/).
+
+:::
+
+<Tabs>
+	<TabItem label="Hyperdrive (recommended)">
+
+To connect to PlanetScale using [Hyperdrive](/hyperdrive), follow these steps:
+
+         <Render file="planetscale-partial" product="hyperdrive"/>
+    </TabItem>
+    <TabItem label="PlanetScale serverless driver">
+
 ## Set up an integration with PlanetScale
 
 To set up an integration with PlanetScale:
@@ -40,11 +57,11 @@ To set up an integration with PlanetScale:
    # Add the database host as a secret
    npx wrangler secret put DATABASE_HOST
    # When prompted, paste your PlanetScale host
-   
+
    # Add the database username as a secret
    npx wrangler secret put DATABASE_USERNAME
    # When prompted, paste your PlanetScale username
-   
+
    # Add the database password as a secret
    npx wrangler secret put DATABASE_PASSWORD
    # When prompted, paste your PlanetScale password
@@ -85,3 +102,6 @@ To set up an integration with PlanetScale:
    ```
 
 To learn more about PlanetScale, refer to [PlanetScale's official documentation](https://docs.planetscale.com/).
+
+</TabItem>
+</Tabs>

src/content/docs/workers/databases/third-party-integrations/supabase.mdx

@@ -3,11 +3,29 @@ pcx_content_type: configuration
 title: Supabase
 ---
 
-import { Render, PackageManagers } from "~/components";
+import { Render, PackageManagers, Tabs, TabItem } from "~/components";
 
 [Supabase](https://supabase.com/) is an open source Firebase alternative and a PostgreSQL database service that offers real-time functionality, database backups, and extensions. With Supabase, developers can quickly set up a PostgreSQL database and build applications.
 
-## Set up an integration with Supabase
+:::note
+
+You can connect to Supabase using [Hyperdrive](/hyperdrive) (recommended), or using the Supabase client, `@supabase/supabase-js`. Both provide connection pooling and reduce the amount of round trips required to create a secure connection from Workers to your database.
+
+Hyperdrive can provide lower latencies because it performs the database connection setup and connection pooling across Cloudflare's network. Hyperdrive supports native database drivers, libraries, and ORMs, and is included in all [Workers plans](/hyperdrive/platform/pricing/). Learn more about Hyperdrive in [How Hyperdrive Works](/hyperdrive/configuration/how-hyperdrive-works/).
+
+:::
+
+<Tabs>
+	<TabItem label="Hyperdrive (recommended)">
+
+When connecting to Supabase with Hyperdrive, you connect directly to the underlying Postgres database. This is [recommended by Supabase](https://supabase.com/docs/guides/database/connecting-to-postgres#choosing-a-connection-method) when accessed server-side from Workers.
+If you prefer to use the Supabase client, refer to the `Supabase client` tab. To connect to Supabase using [Hyperdrive](/hyperdrive), follow these steps:
+
+         <Render file="supabase-partial" product="hyperdrive"/>
+    </TabItem>
+    <TabItem label="Supabase client">
+
+### Supabase client setup
 
 To set up an integration with Supabase:
 
@@ -41,7 +59,7 @@ To set up an integration with Supabase:
    # Add the Supabase URL as a secret
    npx wrangler secret put SUPABASE_URL
    # When prompted, paste your Supabase project URL
-   
+
    # Add the Supabase anon key as a secret
    npx wrangler secret put SUPABASE_KEY
    # When prompted, paste your Supabase anon/public key
@@ -54,20 +72,23 @@ To set up an integration with Supabase:
 6. The following example shows how to make a query to your Supabase database in a Worker. The credentials needed to connect to Supabase have been added as secrets to your Worker.
 
    ```js
-   import { createClient } from '@supabase/supabase-js';
+   import { createClient } from "@supabase/supabase-js";
 
    export default {
-     async fetch(request, env) {
-       const supabase = createClient(env.SUPABASE_URL, env.SUPABASE_KEY);
-       const { data, error } = await supabase.from("countries").select('*');
-       if (error) throw error;
-       return new Response(JSON.stringify(data), {
-         headers: {
-           "Content-Type": "application/json",
-         },
-       });
-     },
+   	async fetch(request, env) {
+   		const supabase = createClient(env.SUPABASE_URL, env.SUPABASE_KEY);
+   		const { data, error } = await supabase.from("countries").select("*");
+   		if (error) throw error;
+   		return new Response(JSON.stringify(data), {
+   			headers: {
+   				"Content-Type": "application/json",
+   			},
+   		});
+   	},
    };
    ```
 
 To learn more about Supabase, refer to [Supabase's official documentation](https://supabase.com/docs).
+
+</TabItem>
+</Tabs>

src/content/docs/workers/databases/third-party-integrations/xata.mdx

@@ -3,10 +3,27 @@ pcx_content_type: configuration
 title: Xata
 ---
 
-import { Render } from "~/components";
+import { Render, TabItem, Tabs } from "~/components";
 
 [Xata](https://xata.io) is a serverless data platform powered by PostgreSQL. Xata uniquely combines multiple types of stores (relational databases, search engines, analytics engines) into a single service, accessible through a consistent REST API.
 
+:::note
+
+You can connect to Xata using [Hyperdrive](/hyperdrive) (recommended), or using the Xata client, `@xata.io/client`. Both provide connection pooling and reduce the amount of round trips required to create a secure connection from Workers to your database.
+
+Hyperdrive can provide lower latencies because it performs the database connection setup and connection pooling across Cloudflare's network. Hyperdrive supports native database drivers, libraries, and ORMs, and is included in all [Workers plans](/hyperdrive/platform/pricing/). Learn more about Hyperdrive in [How Hyperdrive Works](/hyperdrive/configuration/how-hyperdrive-works/).
+
+:::
+
+<Tabs>
+	<TabItem label="Hyperdrive (recommended)">
+
+To connect to Xata using [Hyperdrive](/hyperdrive), follow these steps:
+
+         <Render file="xata-partial" product="hyperdrive"/>
+    </TabItem>
+    <TabItem label="Supabase client">
+
 ## Set up an integration with Xata
 
 To set up an integration with Xata:
@@ -23,11 +40,11 @@ To set up an integration with Xata:
    # Add the Xata API key as a secret
    npx wrangler secret put XATA_API_KEY
    # When prompted, paste your Xata API key
-   
+
    # Add the Xata branch as a secret
    npx wrangler secret put XATA_BRANCH
    # When prompted, paste your Xata branch name (usually 'main')
-   
+
    # Add the Xata database URL as a secret
    npx wrangler secret put XATA_DATABASE_URL
    # When prompted, paste your Xata database URL
@@ -82,3 +99,6 @@ To set up an integration with Xata:
    ```
 
 To learn more about Xata, refer to [Xata's official documentation](https://xata.io/docs).
+
+</TabItem>
+</Tabs>

src/content/partials/hyperdrive/create-hyperdrive-config-mysql.mdx

@@ -54,4 +54,4 @@ id = "<ID OF THE CREATED HYPERDRIVE CONFIGURATION>"
 
 ## 3. Use Hyperdrive from your Worker
 
-<Render file="use-mysql2-to-make-query" />
+<Render file="use-mysql2-to-make-query" product="hyperdrive" />

src/content/partials/hyperdrive/create-hyperdrive-config.mdx

@@ -51,4 +51,4 @@ id = "<ID OF THE CREATED HYPERDRIVE CONFIGURATION>"
 
 ## 3. Use Hyperdrive from your Worker
 
-<Render file="use-postgres-js-to-make-query" />
+<Render file="use-node-postgres-to-make-query" product="hyperdrive" />