Skip to content

Commit db310be

Browse files
docs: update supabase docs for new source (#13819)
1 parent 1e54df8 commit db310be

File tree

4 files changed

+74
-55
lines changed

4 files changed

+74
-55
lines changed

contents/tutorials/supabase-query.md

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,40 @@
11
---
2-
title: How to query Supabase data in PostHog
3-
date: 2024-08-01
2+
title: How to sync and query Supabase data in PostHog
3+
date: 2025-11-11
44
author:
5-
- ian-vanagas
5+
- ian-vanagas
66
tags:
7-
- data warehouse
7+
- data warehouse
88
---
9-
109
Combining your database and analytics data is a powerful way to understand your users. [Supabase](https://supabase.com/) is a popular choice for handling that app data, as it provides a database, auth, storage, and more all-in-one.
1110

12-
Because Supabase is built on Postgres, we can link and query it in PostHog using our data warehouse. This tutorial shows you how to do that and provides some example insights you can create with the data afterward.
11+
Thanks to modern advances in <RainbowText>enterprise synergy</RainbowText>™, we can link and query your Supabase data in PostHog using our data warehouse. This tutorial shows you how to do that and provides some example insights you can create with the data afterward.
1312

1413
## Linking Supabase data to PostHog
1514

16-
> **Note:** We currently don't support connections using IPv6, therefore, you will need to enable IPv4 connections to your database. You can find information on how to do this in the [Supabase docs](https://supabase.com/docs/guides/database/connecting-to-postgres#direct-connection).
15+
> **Note:** We currently don't support connections using IPv6, therefore, you will need to enable IPv4 connections to your database. If you have enabled IPv4 connections, you can [connect directly](https://supabase.com/docs/guides/database/connecting-to-postgres#direct-connection) to your database with a simple connection string. Alternatively, you can use Supabase's [session pooler connection](https://supabase.com/docs/guides/database/connecting-to-postgres#shared-pooler). The shared pooler is IPv4 compatible by default, and it is included in new Supabase projects for free.
16+
> <ProductScreenshot imageLight="https://res.cloudinary.com/dmukukwp6/image/upload/q_auto,f_auto/supabase_connection_methods_c6fe1c0f48.png" imageDark="https://res.cloudinary.com/dmukukwp6/image/upload/q_auto,f_auto/supabase_connection_methods_c6fe1c0f48.png" alt="Supabase data warehouse link setup in PostHog" classes="rounded" />
1717
1818
To start, you need both a Supabase and PostHog account. Once you have those, head to PostHog's [data pipeline sources tab](https://us.posthog.com/pipeline/sources) and:
1919

2020
1. Click **New source**
21-
2. Choose the **Postgres** option by clicking **Link.**
22-
3. Go to your Supabase project settings and under configuration, click **Database.**
23-
4. Fill out the PostHog data warehouse link fields with your Supabase data.
24-
1. Under connection parameters, copy host, database name, port, and user (database name in Supabase is just `database` in PostHog)
25-
26-
![Supabase data warehouse link setup in PostHog](https://res.cloudinary.com/dmukukwp6/image/upload/Clean_Shot_2024_07_30_at_10_35_42_a606e7fc02.png)
27-
28-
2. Enter the password you set for your database.
29-
3. Choose the schema you want to import. See the Supabase table editor for details on what each one has. `public` is the default, but we also use `auth` and `extensions` later in this tutorial.
30-
5. Once you add the details, click **Next**.
21+
2. Choose the **Supabase** option by clicking **Link.**
22+
3. Go to your Supabase project settings and click **Connect** in the top nav bar.
3123

3224
<ProductScreenshot
33-
imageLight="https://res.cloudinary.com/dmukukwp6/image/upload/light_supa_90406c4e12.png"
34-
imageDark="https://res.cloudinary.com/dmukukwp6/image/upload/dark_supa_317ba9c1fc.png"
35-
alt="Supabase data warehouse link setup in PostHog"
25+
imageLight="https://res.cloudinary.com/dmukukwp6/image/upload/q_auto,f_auto/supabase_navbar_connect_43604ec74e.png"
26+
imageDark="https://res.cloudinary.com/dmukukwp6/image/upload/q_auto,f_auto/supabase_navbar_connect_43604ec74e.png"
27+
alt="Supabase data warehouse link setup in PostHog"
3628
classes="rounded"
3729
/>
3830

39-
6. Choose set up the sync methods, choose the tables you want to include, and click **Import** to start the sync.
31+
4. Copy the Supabase connection string shown.
32+
5. Paste the value into the PostHog data warehouse `Connection string` field.
33+
1. Supabase **will not** include your password in the connection string. You will need to replace their password placeholder manually.
34+
2. If you've forgotten your Supabase database password, you can [reset it](https://supabase.com/docs/guides/troubleshooting/how-do-i-reset-my-supabase-database-password-oTs5sB).
35+
6. Fill in the schema name that you want to sync. Typically, this is just `public`.
36+
7. Click **Next**.
37+
8. Select the tables you want to include, how you want to sync them, and click **Import** to start syncing.
4038

4139
Once it completes, you can then query the data in PostHog.
4240

@@ -62,15 +60,15 @@ You can use trends to visualize your data. For example, to visualize a count of
6260
This creates a trend of the count of the objects in your table over time. You can then modify it using filters, visualization options, and breakdowns. For example, to break down by `user_id`, click **Add breakdown**, select the **Data warehouse properties** tab, and then choose `user_id`. To visualize this nicely, you can change the line chart to a total value bar chart.
6361

6462
<ProductScreenshot
65-
imageLight="https://res.cloudinary.com/dmukukwp6/image/upload/Clean_Shot_2024_07_31_at_14_48_04_2x_c6c8b9c6c5.png"
66-
imageDark="https://res.cloudinary.com/dmukukwp6/image/upload/Clean_Shot_2024_07_31_at_14_47_48_2x_807de9f4c3.png"
67-
alt="Visualizing Supabase data in PostHog"
63+
imageLight="https://res.cloudinary.com/dmukukwp6/image/upload/Clean_Shot_2024_07_31_at_14_48_04_2x_c6c8b9c6c5.png"
64+
imageDark="https://res.cloudinary.com/dmukukwp6/image/upload/Clean_Shot_2024_07_31_at_14_47_48_2x_807de9f4c3.png"
65+
alt="Visualizing Supabase data in PostHog"
6866
classes="rounded"
6967
/>
7068

7169
### Combined user overview
7270

73-
Linking your Supabase `user` table (under the `auth` schema) enables you to get an overview of user data across both sources. This does require you to add a table prefix like `supabase_` if you already have a Postgres source linked.
71+
Linking your Supabase `user` table (under the `auth` schema) enables you to get an overview of user data across both sources. This does require you to add a table prefix like `supabase_` if you already have a Postgres source linked.
7472

7573
To create this overview, create a new SQL insight that:
7674

@@ -94,7 +92,7 @@ from sb_users
9492
left join big_events on big_events.distinct_id = sb_users.email
9593
```
9694

97-
We could also PostHog person properties or a Supabase table to these by joining more tables to this query.
95+
We could also PostHog person properties or a Supabase table to these by joining more tables to this query.
9896

9997
> **Tip:** You can also set up a join between [PostHog's `persons` table](/docs/data-warehouse/sources/posthog#persons) and your Supabase `users` table. Go to the data warehouse tab, click the three dots next to the `persons` source, and click **Add join**. This enables you to use Supabase `users` data wherever you can use persons.
10098
> <ProductScreenshot imageLight="https://res.cloudinary.com/dmukukwp6/image/upload/Clean_Shot_2024_08_01_at_14_42_17_2x_21724552d8.png" imageDark="https://res.cloudinary.com/dmukukwp6/image/upload/Clean_Shot_2024_08_01_at_14_42_45_2x_1d6608820e.png" alt="Setting up a join between PostHog's persons table and Supabase users table" classes="rounded" />
@@ -123,7 +121,7 @@ If your payment details were on another table, you could also join that table.
123121

124122
### Querying observability stats
125123

126-
Supabase also captures observability data we can query if you link the `pg_state_statements` table from the `extensions` schema.
124+
Supabase also captures observability data we can query if you link the `pg_state_statements` table from the `extensions` schema.
127125

128126
An example of a query you could get from this is p95 total execution time along with the median rows read:
129127

@@ -167,4 +165,6 @@ LIMIT 20
167165
- [The basics of SQL for analytics](/product-engineers/sql-for-analytics)
168166
- [How to set up Google Ads reports](/tutorials/google-ads-reports)
169167

170-
<NewsletterForm />
168+
<NewsletterForm />
169+
170+
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react'
2+
3+
export const RainbowText = ({ children }) => (
4+
<span
5+
className="inline-block bg-clip-text text-transparent font-bold"
6+
style={{
7+
background:
8+
'linear-gradient(to right, rgb(239, 68, 68), rgb(234, 179, 8), rgb(34, 197, 94), rgb(59, 130, 246), rgb(168, 85, 247))',
9+
WebkitBackgroundClip: 'text',
10+
WebkitTextFillColor: 'transparent',
11+
}}
12+
>
13+
{children}
14+
</span>
15+
)

src/mdxGlobalComponents.js

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,69 @@
11
// AUTO GENERATED FILE
22

3+
import CountriesWeHireIn from './components/AMCharts/CountriesWeHireIn'
34
import { ArrayCTA } from './components/ArrayCTA'
5+
import AskMax from './components/AskMax'
46
import { BasicHedgehogImage } from './components/BasicHedgehogImage'
57
import { BorderWrapper } from './components/BorderWrapper'
68
import { CallToAction } from './components/CallToAction'
79
import { Caption } from './components/Caption'
8-
import CloudinaryImage from './components/CloudinaryImage'
910
import { Images } from './components/Careers/Images'
11+
import CloudinaryImage from './components/CloudinaryImage'
1012
import { ComparisonTable } from './components/ComparisonTable'
1113
import ProductComparisonTable from './components/ProductComparisonTable'
1214
import Snippet from '../contents/docs/integrate/snippet.mdx'
1315
import { CompensationCalculator } from './components/CompensationCalculator'
1416
import { ContentViewer } from './components/ContentViewer'
17+
import { Step, Steps } from './components/Docs/Steps'
1518
import { Drawer } from './components/Drawer'
1619
import { lib } from './components/Edition/lib'
1720
import { Emoji } from './components/Emoji'
1821
import { FeatureAvailability } from './components/FeatureAvailability'
22+
import FeatureOwnershipTable from './components/FeatureOwnershipTable'
1923
import { FormulaScreenshot } from './components/FormulaScreenshot'
2024
import { GDPRForm } from './components/GDPRForm'
2125
import { HiddenSection } from './components/HiddenSection'
2226
import { HubSpotForm } from './components/HubSpotForm'
27+
import ImageSlider from './components/ImageSlider'
2328
import { KeyboardShortcut } from './components/KeyboardShortcut'
24-
import { LPCTA } from './components/LPCTA'
2529
import { Label } from './components/Label'
30+
import Link from './components/Link'
2631
import { List } from './components/List'
32+
import { LPCTA } from './components/LPCTA'
33+
import { MaxCTA } from './components/MaxCTA'
34+
import OSButton from './components/OSButton'
35+
import { OSQuote } from './components/OSQuote'
2736
import { OverflowXSection } from './components/OverflowXSection'
2837
import { Quote } from './components/Pricing/Quote'
29-
import Link from './components/Link'
3038
import { PrivateLink } from './components/PrivateLink'
31-
import ImageSlider from './components/ImageSlider'
3239
import { ProductOS } from './components/Product/ProductOS'
33-
import { ProductScreenshot } from './components/ProductScreenshot'
34-
import { ProductVideo } from './components/ProductVideo'
3540
import { Competitor } from './components/Products/Competitor'
3641
import { DocsLinks } from './components/Products/DocsLinks'
3742
import { FAQ } from './components/Products/FAQ'
3843
import { Feature } from './components/Products/Feature'
3944
import { Marquee } from './components/Products/Marquee'
4045
import { MobileSlides } from './components/Products/MobileSlides'
41-
import { OSQuote } from './components/OSQuote'
4246
import { PairsWith } from './components/Products/PairsWith'
4347
import { Question } from './components/Products/Question'
4448
import { SmoothScroll } from './components/Products/SmoothScroll'
4549
import { Subfeature } from './components/Products/Subfeature'
4650
import { TextCard } from './components/Products/TextCard'
4751
import { TutorialCard } from './components/Products/TutorialCard'
52+
import { ProductScreenshot } from './components/ProductScreenshot'
53+
import { ProductVideo } from './components/ProductVideo'
4854
import { QuickLinks } from './components/QuickLinks'
4955
import { Quote2 } from './components/Quote2'
56+
import { RainbowText } from './components/RainbowText'
5057
import { Signatures } from './components/Signatures'
5158
import { SlackPage } from './components/SlackPage'
59+
import SmallTeam from './components/SmallTeam'
5260
import { Squeak } from './components/Squeak'
5361
import { StarRepoButton } from './components/StarRepoButton'
62+
import TaskOwnershipTable from './components/TaskOwnershipTable'
63+
import TeamMember from './components/TeamMember'
5464
import { TracksCTA } from './components/TracksCTA'
5565
import { Tweet } from './components/Tweet'
5666
import { ZendeskTicket } from './components/ZendeskTicket'
57-
import { MaxCTA } from './components/MaxCTA'
58-
import TeamMember from './components/TeamMember'
59-
import SmallTeam from './components/SmallTeam'
60-
import { Steps, Step } from './components/Docs/Steps'
61-
import OSButton from './components/OSButton'
62-
import AskMax from './components/AskMax'
63-
import CountriesWeHireIn from './components/AMCharts/CountriesWeHireIn'
64-
import FeatureOwnershipTable from './components/FeatureOwnershipTable'
65-
import TaskOwnershipTable from './components/TaskOwnershipTable'
6667
import { CalloutBox } from './components/Docs/CalloutBox'
6768

6869
export const shortcodes = {
@@ -131,4 +132,5 @@ export const shortcodes = {
131132
CountriesWeHireIn,
132133
FeatureOwnershipTable,
133134
TaskOwnershipTable,
135+
RainbowText,
134136
}

src/mdxGlobalComponents.ts

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1+
import { RainbowText } from 'components/RainbowText'
2+
import CountriesWeHireIn from './components/AMCharts/CountriesWeHireIn'
13
import { ArrayCTA } from './components/ArrayCTA'
4+
import AskMax from './components/AskMax'
25
import { BasicHedgehogImage } from './components/BasicHedgehogImage'
36
import { BorderWrapper } from './components/BorderWrapper'
47
import { CallToAction } from './components/CallToAction'
@@ -7,28 +10,26 @@ import { ComparisonTable } from './components/ComparisonTable'
710
import ProductComparisonTable from './components/ProductComparisonTable'
811
import Snippet from '../contents/docs/integrate/snippet.mdx'
912
import { CompensationCalculator } from './components/CompensationCalculator'
13+
import { CalloutBox } from './components/Docs/CalloutBox'
14+
import { Step, Steps } from './components/Docs/Steps'
1015
import { Emoji } from './components/Emoji'
1116
import { FeatureAvailability } from './components/FeatureAvailability'
17+
import FeatureOwnershipTable from './components/FeatureOwnershipTable'
1218
import { FormulaScreenshot } from './components/FormulaScreenshot'
1319
import { GDPRForm } from './components/GDPRForm'
14-
import { OverflowXSection } from './components/OverflowXSection'
20+
import ImageSlider from './components/ImageSlider'
21+
import Link from './components/Link'
22+
import OSButton from './components/OSButton'
1523
import { OSQuote } from './components/OSQuote'
24+
import { OverflowXSection } from './components/OverflowXSection'
1625
import { Quote } from './components/Pricing/Quote'
17-
import OSButton from './components/OSButton'
18-
import SmallTeam from './components/SmallTeam'
19-
import TeamMember from './components/TeamMember'
20-
import Link from './components/Link'
2126
import { PrivateLink } from './components/PrivateLink'
22-
import ImageSlider from './components/ImageSlider'
2327
import { ProductScreenshot } from './components/ProductScreenshot'
2428
import { ProductVideo } from './components/ProductVideo'
29+
import SmallTeam from './components/SmallTeam'
2530
import { StarRepoButton } from './components/StarRepoButton'
26-
import { CalloutBox } from './components/Docs/CalloutBox'
27-
import { Steps, Step } from './components/Docs/Steps'
28-
import AskMax from './components/AskMax'
29-
import CountriesWeHireIn from './components/AMCharts/CountriesWeHireIn'
30-
import FeatureOwnershipTable from './components/FeatureOwnershipTable'
3131
import TaskOwnershipTable from './components/TaskOwnershipTable'
32+
import TeamMember from './components/TeamMember'
3233

3334
// Global MDX components
3435
export const shortcodes = {
@@ -64,4 +65,5 @@ export const shortcodes = {
6465
CountriesWeHireIn,
6566
FeatureOwnershipTable,
6667
TaskOwnershipTable,
68+
RainbowText,
6769
}

0 commit comments

Comments
 (0)