From 80ee4c9ab0daedd8a048e8b443bf240dddcfcc42 Mon Sep 17 00:00:00 2001 From: Charis <26616127+charislam@users.noreply.github.com> Date: Mon, 3 Feb 2025 14:14:08 -0500 Subject: [PATCH] fix: examples (#33276) --- .../getting-started/quickstarts/flutter.mdx | 12 +++--- .../quickstarts/ios-swiftui.mdx | 16 ++++---- .../getting-started/quickstarts/kotlin.mdx | 24 +++++------ .../getting-started/quickstarts/nextjs.mdx | 14 +++---- .../getting-started/quickstarts/nuxtjs.mdx | 14 +++---- .../getting-started/quickstarts/reactjs.mdx | 20 +++++----- .../getting-started/quickstarts/refine.mdx | 40 +++++++++---------- .../getting-started/quickstarts/solidjs.mdx | 14 +++---- .../getting-started/quickstarts/sveltekit.mdx | 12 +++--- .../getting-started/quickstarts/vue.mdx | 16 ++++---- apps/docs/spec/supabase_dart_v2.yml | 7 ++-- 11 files changed, 94 insertions(+), 95 deletions(-) diff --git a/apps/docs/content/guides/getting-started/quickstarts/flutter.mdx b/apps/docs/content/guides/getting-started/quickstarts/flutter.mdx index c9ca79c5b34..6863daee724 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/flutter.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/flutter.mdx @@ -101,7 +101,7 @@ hideToc: true @override Widget build(BuildContext context) { return const MaterialApp( - title: 'Countries', + title: 'Instruments', home: HomePage(), ); } @@ -116,7 +116,7 @@ hideToc: true class _HomePageState extends State { final _future = Supabase.instance.client - .from('countries') + .from('instruments') .select(); @override @@ -128,13 +128,13 @@ hideToc: true if (!snapshot.hasData) { return const Center(child: CircularProgressIndicator()); } - final countries = snapshot.data!; + final instruments = snapshot.data!; return ListView.builder( - itemCount: countries.length, + itemCount: instruments.length, itemBuilder: ((context, index) { - final country = countries[index]; + final instrument = instruments[index]; return ListTile( - title: Text(country['name']), + title: Text(instrument['name']), ); }), ); diff --git a/apps/docs/content/guides/getting-started/quickstarts/ios-swiftui.mdx b/apps/docs/content/guides/getting-started/quickstarts/ios-swiftui.mdx index 3563c9b5d29..4889133195e 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/ios-swiftui.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/ios-swiftui.mdx @@ -63,18 +63,18 @@ hideToc: true - + Create a decodable struct to deserialize the data from the database. - Add the following code to a new file named `Country.swift`. + Add the following code to a new file named `Instrument.swift`. ```swift Supabase.swift - struct Country: Decodable, Identifiable { + struct Instrument: Decodable, Identifiable { let id: Int let name: String } @@ -99,20 +99,20 @@ hideToc: true ```swift ContentView.swift struct ContentView: View { - @State var countries: [Country] = [] + @State var instruments: [Instrument] = [] var body: some View { - List(countries) { country in - Text(country.name) + List(instruments) { instrument in + Text(instrument.name) } .overlay { - if countries.isEmpty { + if instruments.isEmpty { ProgressView() } } .task { do { - countries = try await supabase.from("countries").select().execute().value + instruments = try await supabase.from("instruments").select().execute().value } catch { dump(error) } diff --git a/apps/docs/content/guides/getting-started/quickstarts/kotlin.mdx b/apps/docs/content/guides/getting-started/quickstarts/kotlin.mdx index 45998483259..fab273e5c00 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/kotlin.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/kotlin.mdx @@ -8,7 +8,7 @@ hideToc: true - + @@ -103,7 +103,7 @@ hideToc: true - + Create a serializable data class to represent the data from the database. Add the following below the `createSupabaseClient` function in the `MainActivity.kt` file. @@ -112,7 +112,7 @@ hideToc: true ```kotlin @Serializable - data class Country( + data class Instrument( val id: Int, val name: String, ) @@ -144,7 +144,7 @@ hideToc: true modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background ) { - CountriesList() + InstrumentsList() } } } @@ -152,21 +152,21 @@ hideToc: true } @Composable - fun CountriesList() { - var countries by remember { mutableStateOf>(listOf()) } + fun InstrumentsList() { + var instruments by remember { mutableStateOf>(listOf()) } LaunchedEffect(Unit) { withContext(Dispatchers.IO) { - countries = supabase.from("countries") - .select().decodeList() + instruments = supabase.from("instruments") + .select().decodeList() } } LazyColumn { items( - countries, - key = { country -> country.id }, - ) { country -> + instruments, + key = { instrument -> instrument.id }, + ) { instrument -> Text( - country.name, + instrument.name, modifier = Modifier.padding(8.dp), ) } diff --git a/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx b/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx index 88b705e3f90..48fcf5ef675 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx @@ -58,9 +58,9 @@ hideToc: true - Create a new file at `app/countries/page.tsx` and populate with the following. + Create a new file at `app/instruments/page.tsx` and populate with the following. - This will select all the rows from the `countries` table in Supabase and render them on the page. + This will select all the rows from the `instruments` table in Supabase and render them on the page. @@ -68,14 +68,14 @@ hideToc: true - ```ts app/countries/page.tsx + ```ts app/instruments/page.tsx import { createClient } from '@/utils/supabase/server'; - export default async function Countries() { + export default async function Instruments() { const supabase = await createClient(); - const { data: countries } = await supabase.from("countries").select(); + const { data: instruments } = await supabase.from("instruments").select(); - return 
{JSON.stringify(countries, null, 2)}
+ return 
{JSON.stringify(instruments, null, 2)}
} ``` @@ -120,7 +120,7 @@ hideToc: true - Run the development server, go to http://localhost:3000/countries in a browser and you should see the list of countries. + Run the development server, go to http://localhost:3000/instruments in a browser and you should see the list of instruments. diff --git a/apps/docs/content/guides/getting-started/quickstarts/nuxtjs.mdx b/apps/docs/content/guides/getting-started/quickstarts/nuxtjs.mdx index 4de7d702372..4ba45b41a18 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/nuxtjs.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/nuxtjs.mdx @@ -68,21 +68,21 @@ hideToc: true ``` @@ -94,7 +94,7 @@ hideToc: true - Start the app, navigate to http://localhost:3000 in the browser, open the browser console, and you should see the list of countries. + Start the app, navigate to http://localhost:3000 in the browser, open the browser console, and you should see the list of instruments. diff --git a/apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx b/apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx index dfebf4a9fe8..9e430b2786e 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx @@ -8,7 +8,7 @@ hideToc: true - + @@ -58,7 +58,7 @@ hideToc: true - Add a `getCountries` function to fetch the data and display the query result to the page. + Add a `getInstruments` function to fetch the data and display the query result to the page. @@ -71,21 +71,21 @@ hideToc: true const supabase = createClient("https://.supabase.co", ""); function App() { - const [countries, setCountries] = useState([]); + const [instruments, setInstruments] = useState([]); useEffect(() => { - getCountries(); + getInstruments(); }, []); - async function getCountries() { - const { data } = await supabase.from("countries").select(); - setCountries(data); + async function getInstruments() { + const { data } = await supabase.from("instruments").select(); + setInstruments(data); } return (
    - {countries.map((country) => ( -
  • {country.name}
    • + {instruments.map((instrument) => ( +
  • {instrument.name}
    • ))}
); @@ -101,7 +101,7 @@ hideToc: true - Start the app, go to http://localhost:5173 in a browser, and open the browser console and you should see the list of countries. + Start the app, go to http://localhost:5173 in a browser, and open the browser console and you should see the list of instruments. diff --git a/apps/docs/content/guides/getting-started/quickstarts/refine.mdx b/apps/docs/content/guides/getting-started/quickstarts/refine.mdx index c8dc79291fe..c061ecf8156 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/refine.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/refine.mdx @@ -105,13 +105,13 @@ hideToc: true - + - You have to then configure resources and define pages for `countries` resource. + You have to then configure resources and define pages for `instruments` resource. - Use the following command to automatically add resources and generate code for pages for `countries` using refine Inferencer. + Use the following command to automatically add resources and generate code for pages for `instruments` using refine Inferencer. - This defines pages for `list`, `create`, `show` and `edit` actions inside the `src/pages/countries/` directory with `` component. + This defines pages for `list`, `create`, `show` and `edit` actions inside the `src/pages/instruments/` directory with `` component. The `` component depends on `@refinedev/react-table` and `@refinedev/react-hook-form` packages. In order to avoid errors, you should install them as dependencies with `npm install @refinedev/react-table @refinedev/react-hook-form`. @@ -129,14 +129,14 @@ hideToc: true ```bash Terminal - npm run refine create-resource countries + npm run refine create-resource instruments ``` - + Add routes for the `list`, `create`, `show`, and `edit` pages. @@ -163,7 +163,7 @@ hideToc: true import "./App.css"; import authProvider from "./authProvider"; import { supabaseClient } from "./utility"; - import { CountriesCreate, CountriesEdit, CountriesList, CountriesShow } from "./pages/countries"; + import { InstrumentsCreate, InstrumentsEdit, InstrumentsList, InstrumentsShow } from "./pages/instruments"; function App() { return ( @@ -179,21 +179,21 @@ hideToc: true warnWhenUnsavedChanges: true, }} resources={[{ - name: "countries", - list: "/countries", - create: "/countries/create", - edit: "/countries/edit/:id", - show: "/countries/show/:id" + name: "instruments", + list: "/instruments", + create: "/instruments/create", + edit: "/instruments/edit/:id", + show: "/instruments/show/:id" }]}> } + element={} /> - - } /> - } /> - } /> - } /> + + } /> + } /> + } /> + } /> @@ -212,9 +212,9 @@ hideToc: true - + - Now you should be able to see the countries pages along the `/countries` routes. You may now edit and add new countries using the Inferencer generated UI. + Now you should be able to see the instruments pages along the `/instruments` routes. You may now edit and add new instruments using the Inferencer generated UI. The Inferencer auto-generated code gives you a good starting point on which to keep building your `list`, `create`, `show` and `edit` pages. They can be obtained by clicking the `Show the auto-generated code` buttons in their respective pages. diff --git a/apps/docs/content/guides/getting-started/quickstarts/solidjs.mdx b/apps/docs/content/guides/getting-started/quickstarts/solidjs.mdx index f5c13f9f771..4e5948912a3 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/solidjs.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/solidjs.mdx @@ -8,7 +8,7 @@ hideToc: true - + @@ -58,7 +58,7 @@ hideToc: true - Add a `getCountries` function to fetch the data and display the query result to the page. + Add a `getInstruments` function to fetch the data and display the query result to the page. @@ -70,17 +70,17 @@ hideToc: true const supabase = createClient('https://.supabase.co', ''); - async function getCountries() { - const { data } = await supabase.from("countries").select(); + async function getInstruments() { + const { data } = await supabase.from("instruments").select(); return data; } function App() { - const [countries] = createResource(getCountries); + const [instruments] = createResource(getInstruments); return (
    - {(country) =>
  • {country.name}
    • }     + {(instrument) =>
  • {instrument.name}
    • }
); } @@ -95,7 +95,7 @@ hideToc: true - Start the app and go to http://localhost:3000 in a browser and you should see the list of countries. + Start the app and go to http://localhost:3000 in a browser and you should see the list of instruments. diff --git a/apps/docs/content/guides/getting-started/quickstarts/sveltekit.mdx b/apps/docs/content/guides/getting-started/quickstarts/sveltekit.mdx index c78cc43a9b1..c2d39d35556 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/sveltekit.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/sveltekit.mdx @@ -8,7 +8,7 @@ hideToc: true - + @@ -87,9 +87,9 @@ hideToc: true import { supabase } from "$lib/supabaseClient"; export async function load() { - const { data } = await supabase.from("countries").select(); + const { data } = await supabase.from("instruments").select(); return { - countries: data ?? [], + instruments: data ?? [], }; } ``` @@ -110,8 +110,8 @@ hideToc: true
    - {#each data.countries as country} -
  • {country.name}
    • + {#each data.instruments as instrument} +
  • {instrument.name}
    • {/each}
``` @@ -123,7 +123,7 @@ hideToc: true - Start the app and go to http://localhost:5173 in a browser and you should see the list of countries. + Start the app and go to http://localhost:5173 in a browser and you should see the list of instruments. diff --git a/apps/docs/content/guides/getting-started/quickstarts/vue.mdx b/apps/docs/content/guides/getting-started/quickstarts/vue.mdx index 4d7443dd468..fdd447e046c 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/vue.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/vue.mdx @@ -8,7 +8,7 @@ hideToc: true - + @@ -86,21 +86,21 @@ hideToc: true import { ref, onMounted } from 'vue' import { supabase } from './lib/supabaseClient' - const countries = ref([]) + const instruments = ref([]) - async function getCountries() { - const { data } = await supabase.from('countries').select() - countries.value = data + async function getInstruments() { + const { data } = await supabase.from('instruments').select() + instruments.value = data } onMounted(() => { - getCountries() + getInstruments() }) ``` @@ -112,7 +112,7 @@ hideToc: true - Start the app and go to http://localhost:5173 in a browser and you should see the list of countries. + Start the app and go to http://localhost:5173 in a browser and you should see the list of instruments. diff --git a/apps/docs/spec/supabase_dart_v2.yml b/apps/docs/spec/supabase_dart_v2.yml index c058763c23c..623eab3dfd5 100644 --- a/apps/docs/spec/supabase_dart_v2.yml +++ b/apps/docs/spec/supabase_dart_v2.yml @@ -2573,11 +2573,10 @@ functions: code: | ```dart final data = await supabase - .from('products') + .from('orchestral_sections') .select(''' - id, - supplier:supplier_id ( name ), - purchaser:purchaser_id ( name ) + name, + instruments ( name ) '''); ``` data: