Explore the development workflow

import { createClient } from '@schemarch/schemarch-js'
import { useEffect, useState } from 'react'

const client = createClient(
  import.meta.env.VITE_SCHEMARCH_URL,
  import.meta.env.VITE_SCHEMARCH_PUBLISHABLE_KEY
)

export function Projects() {
  const [projects, setProjects] = useState([])
  const [error, setError] = useState(null)

  useEffect(() => {
    client.from('projects').select('id, name').limit(10)
      .then(({ data, error }) => {
        setProjects(data ?? [])
        setError(error)
      })
  }, [])

  if (error) return <p>{error.message}</p>
  return <pre>{JSON.stringify(projects, null, 2)}</pre>
}

import { createClient } from '@schemarch/schemarch-js'

// Server component using a publishable project key.
const client = createClient(
  process.env.SCHEMARCH_URL,
  process.env.SCHEMARCH_PUBLISHABLE_KEY
)

export default async function ProjectsPage() {
  const { data, error } = await client
    .from('projects').select('id, name').limit(10)

  if (error) throw error
  return <pre>{JSON.stringify(data, null, 2)}</pre>
}

<script setup>
import { createClient } from '@schemarch/schemarch-js'
import { ref, onMounted } from 'vue'

const client = createClient(
  import.meta.env.VITE_SCHEMARCH_URL,
  import.meta.env.VITE_SCHEMARCH_PUBLISHABLE_KEY
)
const projects = ref([])
const errorMessage = ref('')

onMounted(async () => {
  const { data, error } = await client
    .from('projects').select('id, name').limit(10)
  projects.value = data ?? []
  errorMessage.value = error?.message ?? ''
})
</script>

<template>
  <p v-if="errorMessage">{{ errorMessage }}</p>
  <pre v-else>{{ projects }}</pre>
</template>

<script>
  import { onMount } from 'svelte'
  import { createClient } from '@schemarch/schemarch-js'
  import { PUBLIC_SCHEMARCH_URL, PUBLIC_SCHEMARCH_KEY }
    from '$env/static/public'

  const client = createClient(
    PUBLIC_SCHEMARCH_URL, PUBLIC_SCHEMARCH_KEY
  )
  let projects = []
  let errorMessage = ''

  onMount(() => {
    client.from('projects').select('id, name').limit(10)
      .then(({ data, error }) => {
        projects = data ?? []
        errorMessage = error?.message ?? ''
      })
  })
</script>

{#if errorMessage}<p>{errorMessage}</p>
{:else}<pre>{JSON.stringify(projects, null, 2)}</pre>{/if}

<script setup>
import { createClient } from '@schemarch/schemarch-js'

const config = useRuntimeConfig()
const client = createClient(
  config.public.schemarchUrl,
  config.public.schemarchPublishableKey
)

const { data: projects, error } = await useAsyncData(
  'projects',
  async () => {
    const { data, error } = await client
      .from('projects').select('id, name').limit(10)
    if (error) throw error
    return data
  }
)
</script>

<template>
  <p v-if="error">{{ error.message }}</p>
  <pre v-else>{{ projects }}</pre>
</template>

import { createClient } from '@schemarch/schemarch-js'

const client = createClient(
  'YOUR_PROJECT_URL',
  'YOUR_PUBLISHABLE_KEY'
)

const { data, error } = await client
  .from('projects')
  .select('id, name')
  .limit(10)

if (error) throw error
console.log(data)