Merge pull request #10126 from Dustin-dusTir/inconsistent-naming-of-the-SupabaseClient-instance-in-md-and-mdx-files

docs: fix inconsistent naming of the SupabaseClient instance

apps/docs/docs/guides/storage.mdx

@@ -93,9 +93,9 @@ const { data, error } = await supabase.storage.createBucket('avatars')
 
 ```dart
 void main() async {
-  final client = SupabaseClient('supabaseUrl', 'supabaseKey');
+  final supabase = SupabaseClient('supabaseUrl', 'supabaseKey');
 
-  final storageResponse = await client
+  final storageResponse = await supabase
       .storage
       .createBucket('avatars');
 }
@@ -140,12 +140,12 @@ const { data, error } = await supabase.storage
 
 ```dart
 void main() async {
-  final client = SupabaseClient('supabaseUrl', 'supabaseKey');
+  final supabase = SupabaseClient('supabaseUrl', 'supabaseKey');
 
   // Create file `example.txt` and upload it in `public` bucket
   final file = File('example.txt');
   file.writeAsStringSync('File content');
-  final storageResponse = await client
+  final storageResponse = await supabase
       .storage
       .from('public')
       .upload('example.txt', file);
@@ -190,9 +190,9 @@ const { data, error } = await supabase.storage.from('avatars').download('public/
 
 ```dart
 void main() async {
-  final client = SupabaseClient('supabaseUrl', 'supabaseKey');
+  final supabase = SupabaseClient('supabaseUrl', 'supabaseKey');
 
-  final storageResponse = await client
+  final storageResponse = await supabase
       .storage
       .from('public')
       .download('example.txt');

apps/docs/docs/guides/with-nextjs.mdx

@@ -110,11 +110,11 @@ import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
 import { SessionContextProvider } from '@supabase/auth-helpers-react'
 
 function MyApp({ Component, pageProps }) {
-  const [supabaseClient] = useState(() => createBrowserSupabaseClient())
+  const [supabase] = useState(() => createBrowserSupabaseClient())
 
   return (
     <SessionContextProvider
-      supabaseClient={supabaseClient}
+      supabaseClient={supabase}
       initialSession={pageProps.initialSession}
     >
       <Component {...pageProps} />
@@ -139,11 +139,11 @@ function MyApp({
 }: AppProps<{
   initialSession: Session,
 }>) {
-  const [supabaseClient] = useState(() => createBrowserSupabaseClient())
+  const [supabase] = useState(() => createBrowserSupabaseClient())
 
   return (
     <SessionContextProvider
-      supabaseClient={supabaseClient}
+      supabaseClient={supabase}
       initialSession={pageProps.initialSession}
     >
       <Component {...pageProps} />

apps/docs/docs/guides/with-redwoodjs.mdx

@@ -305,12 +305,12 @@ import { createClient } from '@supabase/supabase-js'
 
 // ...
 
-const supabaseClient = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY)
+const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY)
 
 const App = () => (
   <FatalErrorBoundary page={FatalErrorPage}>
     <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
-      <AuthProvider client={supabaseClient} type="supabase">
+      <AuthProvider client={supabase} type="supabase">
         <RedwoodApolloProvider>
           <Routes />
         </RedwoodApolloProvider>

apps/docs/docs/guides/with-sveltekit.mdx

@@ -56,7 +56,7 @@ on the browser, and that's completely fine since we have [Row Level Security](/d
 import { createClient } from '@supabase/auth-helpers-sveltekit'
 import { env } from '$env/dynamic/public'
 
-export const supabaseClient = createClient(env.PUBLIC_SUPABASE_URL, env.PUBLIC_SUPABASE_ANON_KEY)
+export const supabase = createClient(env.PUBLIC_SUPABASE_URL, env.PUBLIC_SUPABASE_ANON_KEY)
 ```
 
 And one optional step is to update the CSS file `public/global.css` to make the app look nice.
@@ -78,7 +78,7 @@ Update your `src/routes/+layout.svelte`:
 
 ```html title=src/routes/+layout.svelte
 <script lang="ts">
-  import { supabaseClient } from '$lib/supabaseClient'
+  import { supabase } from '$lib/supabaseClient'
   import { invalidate } from '$app/navigation'
   import { onMount } from 'svelte'
   import './styles.css'
@@ -86,7 +86,7 @@ Update your `src/routes/+layout.svelte`:
   onMount(() => {
     const {
       data: { subscription },
-    } = supabaseClient.auth.onAuthStateChange(() => {
+    } = supabase.auth.onAuthStateChange(() => {
       invalidate('supabase:auth')
     })
 
@@ -142,7 +142,7 @@ Let's set up a Svelte component to manage logins and sign ups. We'll use Magic L
 
 ```html title=src/routes/Auth.svelte
 <script lang="ts">
-  import { supabaseClient } from '$lib/supabaseClient'
+  import { supabase } from '$lib/supabaseClient'
 
   let loading = false
   let email: string
@@ -150,7 +150,7 @@ Let's set up a Svelte component to manage logins and sign ups. We'll use Magic L
   const handleLogin = async () => {
     try {
       loading = true
-      const { error } = await supabaseClient.auth.signInWithOtp({ email })
+      const { error } = await supabase.auth.signInWithOtp({ email })
       if (error) throw error
       alert('Check your email for the login link!')
     } catch (error) {
@@ -187,7 +187,7 @@ Create a new `Account.svelte` component to handle this functionality.
 <script lang="ts">
   import { onMount } from 'svelte'
   import type { AuthSession } from '@supabase/supabase-js'
-  import { supabaseClient } from '$lib/supabaseClient'
+  import { supabase } from '$lib/supabaseClient'
 
   export let session: AuthSession
 
@@ -205,7 +205,7 @@ Create a new `Account.svelte` component to handle this functionality.
       loading = true
       const { user } = session
 
-      const { data, error, status } = await supabaseClient
+      const { data, error, status } = await supabase
         .from('profiles')
         .select(`username, website, avatar_url`)
         .eq('id', user.id)
@@ -240,7 +240,7 @@ Create a new `Account.svelte` component to handle this functionality.
         updated_at: new Date(),
       }
 
-      let { error } = await supabaseClient.from('profiles').upsert(updates)
+      let { error } = await supabase.from('profiles').upsert(updates)
 
       if (error) throw error
     } catch (error) {
@@ -255,7 +255,7 @@ Create a new `Account.svelte` component to handle this functionality.
   async function signOut() {
     try {
       loading = true
-      let { error } = await supabaseClient.auth.signOut()
+      let { error } = await supabase.auth.signOut()
       if (error) throw error
     } catch (error) {
       if (error instanceof Error) {
@@ -336,7 +336,7 @@ Let's create an avatar for the user so that they can upload a profile photo. We
 ```html title=src/routes/Avatar.svelte
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
-  import { supabaseClient } from '$lib/supabaseClient'
+  import { supabase } from '$lib/supabaseClient'
 
   export let size = 10
   export let url: string
@@ -349,7 +349,7 @@ Let's create an avatar for the user so that they can upload a profile photo. We
 
   const downloadImage = async (path: string) => {
     try {
-      const { data, error } = await supabaseClient.storage.from('avatars').download(path)
+      const { data, error } = await supabase.storage.from('avatars').download(path)
 
       if (error) {
         throw error
@@ -376,7 +376,7 @@ Let's create an avatar for the user so that they can upload a profile photo. We
       const fileExt = file.name.split('.').pop()
       const filePath = `${Math.random()}.${fileExt}`
 
-      let { error } = await supabaseClient.storage.from('avatars').upload(filePath, file)
+      let { error } = await supabase.storage.from('avatars').upload(filePath, file)
 
       if (error) {
         throw error

apps/docs/docs/reference/javascript/release-notes.mdx

@@ -123,14 +123,14 @@ const { data } = await supabase.auth.signIn({
 There is a new `channel()` method in the Realtime library, which will be used for our Multiplayer updates.
 
 ```ts
-supabaseClient
+supabase
   .channel('any_string_you_want')
   .on('presence', { event: 'track' }, (payload) => {
     console.log(payload)
   })
   .subscribe()
 
-supabaseClient
+supabase
   .channel('any_string_you_want')
   .on(
     'postgres_changes',

apps/docs/docs/reference/javascript/upgrade-guide.mdx

@@ -28,7 +28,7 @@ _Optionally_ if you are using custom configuration with `createClient` then foll
 <TabPanel id="1.0x" label="Before">
 
 ```ts title=src/supabaseClient.ts
-const supabaseClient = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
+const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
   schema: 'custom',
   persistSession: false,
 })
@@ -38,7 +38,7 @@ const supabaseClient = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
 <TabPanel id="2.0x" label="After">
 
 ```ts title=src/supabaseClient.ts
-const supabaseClient = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
+const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
   db: {
     schema: 'custom',
   },

apps/reference/_supabase_js/release-notes.md

@@ -126,14 +126,14 @@ const { data } = await supabase.auth.signIn({
 There is a new `channel()` method in the Realtime library, which will be used for our Multiplayer updates.
 
 ```ts
-supabaseClient
+supabase
   .channel('any_string_you_want')
   .on('presence', { event: 'track' }, (payload) => {
     console.log(payload)
   })
   .subscribe()
 
-supabaseClient
+supabase
   .channel('any_string_you_want')
   .on(
     'postgres_changes',

apps/reference/_supabase_js/upgrade-guide.mdx

@@ -30,7 +30,7 @@ npm install @supabase/supabase-js@2
 <TabItem value="1.x">
 
 ```ts title="src/supabaseClient.ts"
-const supabaseClient = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
+const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
   schema: 'custom',
   persistSession: false
 })
@@ -40,7 +40,7 @@ const supabaseClient = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
 <TabItem value="2.x">
 
 ```ts title="src/supabaseClient.ts"
-const supabaseClient = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
+const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
   db: {
     schema: 'custom'
   },

apps/reference/docs/guides/functions/auth.mdx

@@ -24,7 +24,7 @@ import { createClient } from 'https://esm.sh/@supabase/supabase-js@2.0.0-rc.12'
 serve(async (req: Request) => {
   try {
     // Create a Supabase client with the Auth context of the logged in user.
-    const supabaseClient = createClient(
+    const supabase = createClient(
       // Supabase API URL - env var exported by default.
       Deno.env.get('SUPABASE_URL') ?? '',
       // Supabase API ANON KEY - env var exported by default.
@@ -38,12 +38,12 @@ serve(async (req: Request) => {
     // highlight-start
     const {
       data: { user },
-    } = await supabaseClient.auth.getUser()
+    } = await supabase.auth.getUser()
     // highlight-end
 
     // And we can run queries in the context of our authenticated user
     // highlight-start
-    const { data, error } = await supabaseClient.from('users').select('*')
+    const { data, error } = await supabase.from('users').select('*')
     if (error) throw error
     // highlight-end
 

apps/reference/docs/guides/storage.mdx

@@ -94,9 +94,9 @@ const { data, error } = await supabase.storage.createBucket('avatars')
 
 ```dart
 void main() async {
-  final client = SupabaseClient('supabaseUrl', 'supabaseKey');
+  final supabase = SupabaseClient('supabaseUrl', 'supabaseKey');
 
-  final storageResponse = await client
+  final storageResponse = await supabase
       .storage
       .createBucket('avatars');
 }
@@ -143,12 +143,12 @@ const { data, error } = await supabase.storage
 
 ```dart
 void main() async {
-  final client = SupabaseClient('supabaseUrl', 'supabaseKey');
+  final supabase = SupabaseClient('supabaseUrl', 'supabaseKey');
 
   // Create file `example.txt` and upload it in `public` bucket
   final file = File('example.txt');
   file.writeAsStringSync('File content');
-  final storageResponse = await client
+  final storageResponse = await supabase
       .storage
       .from('public')
       .upload('example.txt', file);
@@ -195,9 +195,9 @@ const { data, error } = await supabase.storage
 
 ```dart
 void main() async {
-  final client = SupabaseClient('supabaseUrl', 'supabaseKey');
+  final supabase = SupabaseClient('supabaseUrl', 'supabaseKey');
 
-  final storageResponse = await client
+  final storageResponse = await supabase
       .storage
       .from('public')
       .download('example.txt');

apps/reference/docs/guides/with-nextjs.mdx

@@ -113,11 +113,11 @@ import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
 import { SessionContextProvider } from '@supabase/auth-helpers-react'
 
 function MyApp({ Component, pageProps }) {
-  const [supabaseClient] = useState(() => createBrowserSupabaseClient())
+  const [supabase] = useState(() => createBrowserSupabaseClient())
 
   return (
     <SessionContextProvider
-      supabaseClient={supabaseClient}
+      supabaseClient={supabase}
       initialSession={pageProps.initialSession}
     >
       <Component {...pageProps} />
@@ -144,11 +144,11 @@ function MyApp({
   // highlight-next-line
   initialSession: Session,
 }>) {
-  const [supabaseClient] = useState(() => createBrowserSupabaseClient())
+  const [supabase] = useState(() => createBrowserSupabaseClient())
 
   return (
     <SessionContextProvider
-      supabaseClient={supabaseClient}
+      supabaseClient={supabase}
       initialSession={pageProps.initialSession}
     >
       <Component {...pageProps} />

apps/reference/docs/guides/with-redwoodjs.mdx

@@ -303,7 +303,7 @@ import { createClient } from '@supabase/supabase-js'
 
 // ...
 
-const supabaseClient = createClient(
+const supabase = createClient(
   process.env.SUPABASE_URL,
   process.env.SUPABASE_KEY
 )
@@ -311,7 +311,7 @@ const supabaseClient = createClient(
 const App = () => (
   <FatalErrorBoundary page={FatalErrorPage}>
     <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
-      <AuthProvider client={supabaseClient} type="supabase">
+      <AuthProvider client={supabase} type="supabase">
         <RedwoodApolloProvider>
           <Routes />
         </RedwoodApolloProvider>

apps/reference/docs/guides/with-sveltekit.mdx

@@ -56,7 +56,7 @@ on the browser, and that's completely fine since we have [Row Level Security](/d
 import { createClient } from '@supabase/auth-helpers-sveltekit'
 import { env } from '$env/dynamic/public'
 
-export const supabaseClient = createClient(env.PUBLIC_SUPABASE_URL, env.PUBLIC_SUPABASE_ANON_KEY)
+export const supabase = createClient(env.PUBLIC_SUPABASE_URL, env.PUBLIC_SUPABASE_ANON_KEY)
 ```
 
 And one optional step is to add the CSS file at `src/routes/styles.css` to make the app look nice.
@@ -78,7 +78,7 @@ Update your `src/routes/+layout.svelte`:
 
 ```html title="src/routes/+layout.svelte"
 <script lang="ts">
-	import { supabaseClient } from '$lib/supabaseClient'
+	import { supabase } from '$lib/supabaseClient'
 	import { invalidate } from '$app/navigation'
 	import { onMount } from 'svelte'
 	import './styles.css'
@@ -86,7 +86,7 @@ Update your `src/routes/+layout.svelte`:
 	onMount(() => {
 		const {
 			data: { subscription }
-		} = supabaseClient.auth.onAuthStateChange(() => {
+		} = supabase.auth.onAuthStateChange(() => {
 			invalidate('supabase:auth')
 		})
 
@@ -142,7 +142,7 @@ Let's set up a Svelte component to manage logins and sign ups. We'll use Magic L
 
 ```html title="src/routes/Auth.svelte"
 <script lang="ts">
-	import { supabaseClient } from '$lib/supabaseClient'
+	import { supabase } from '$lib/supabaseClient'
 
 	let loading = false
 	let email: string
@@ -150,7 +150,7 @@ Let's set up a Svelte component to manage logins and sign ups. We'll use Magic L
 	const handleLogin = async () => {
 		try {
 			loading = true
-			const { error } = await supabaseClient.auth.signInWithOtp({ email })
+			const { error } = await supabase.auth.signInWithOtp({ email })
 			if (error) throw error
 			alert('Check your email for the login link!')
 		} catch (error) {
@@ -191,7 +191,7 @@ Create a new `Account.svelte` component to handle this functionality.
 <script lang="ts">
 	import { onMount } from 'svelte'
 	import type { AuthSession } from '@supabase/supabase-js'
-	import { supabaseClient } from '$lib/supabaseClient'
+	import { supabase } from '$lib/supabaseClient'
 
 	export let session: AuthSession
 
@@ -209,7 +209,7 @@ Create a new `Account.svelte` component to handle this functionality.
 			loading = true
 			const { user } = session
 
-			const { data, error, status } = await supabaseClient
+			const { data, error, status } = await supabase
 				.from('profiles')
 				.select(`username, website, avatar_url`)
 				.eq('id', user.id)
@@ -244,7 +244,7 @@ Create a new `Account.svelte` component to handle this functionality.
 				updated_at: new Date()
 			}
 
-			let { error } = await supabaseClient.from('profiles').upsert(updates)
+			let { error } = await supabase.from('profiles').upsert(updates)
 
 			if (error) throw error
 		} catch (error) {
@@ -259,7 +259,7 @@ Create a new `Account.svelte` component to handle this functionality.
 	async function signOut() {
 		try {
 			loading = true
-			let { error } = await supabaseClient.auth.signOut()
+			let { error } = await supabase.auth.signOut()
 			if (error) throw error
 		} catch (error) {
 			if (error instanceof Error) {
@@ -344,7 +344,7 @@ Let's create an avatar for the user so that they can upload a profile photo. We
 ```html title="src/routes/Avatar.svelte"
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte'
-	import { supabaseClient } from '$lib/supabaseClient'
+	import { supabase } from '$lib/supabaseClient'
 
 	export let size = 10
 	export let url: string
@@ -357,7 +357,7 @@ Let's create an avatar for the user so that they can upload a profile photo. We
 
 	const downloadImage = async (path: string) => {
 		try {
-			const { data, error } = await supabaseClient.storage.from('avatars').download(path)
+			const { data, error } = await supabase.storage.from('avatars').download(path)
 
 			if (error) {
 				throw error
@@ -384,7 +384,7 @@ Let's create an avatar for the user so that they can upload a profile photo. We
 			const fileExt = file.name.split('.').pop()
 			const filePath = `${Math.random()}.${fileExt}`
 
-			let { error } = await supabaseClient.storage.from('avatars').upload(filePath, file)
+			let { error } = await supabase.storage.from('avatars').upload(filePath, file)
 
 			if (error) {
 				throw error

apps/www/_blog/2022-08-16-supabase-js-v2.mdx

@@ -246,7 +246,7 @@ There is a new `channel()` interface which are releasing in v2.
 This is a "preparatory" release for our upcoming [multiplayer](https://supabase.com/blog/supabase-realtime-with-multiplayer-features) features.
 
 ```ts
-supabaseClient
+supabase
   .channel('any_string_you_want')
   .on('presence', { event: 'track' }, (payload) => {
     console.log(payload)
@@ -258,7 +258,7 @@ As part of this change, the old `from().on().subscribe()` method for listening t
 
 ```ts
 // v2
-supabaseClient
+supabase
   .channel('any_string_you_want')
   .on(
     'postgres_changes',