svelte-query Example to Query Github REST API and Fetch Data in Browser Using Javascript Full Project For Beginners

 

 

Get started (Devs)

git clone git@github.com:SvelteStack/svelte-query.git
cd svelte-query
yarn
yarn storybook

 

 

App.svelte

 

 

<script>
  import { QueryClientProvider } from '@sveltestack/svelte-query'

  import Simple from './Simple.svelte'
</script>

<QueryClientProvider>
  <Simple />
</QueryClientProvider>

 

 

simple.svelte

 

 

<script>
  import { useQuery } from '@sveltestack/svelte-query'

  const queryResult = useQuery('repoData', () => {
    return fetch(
      'https://api.github.com/repos/SvelteStack/svelte-query'
    ).then(res => res.json())
  })
</script>

{#if $queryResult.isLoading}
  Loading...
{:else if $queryResult.error}
  An error has occurred:
  {$queryResult.error.message}
{:else}
  <div>
    <h1>{$queryResult.data.name}</h1>
    <p>{$queryResult.data.description}</p>
    <strong>👀 {$queryResult.data.subscribers_count}</strong>{' '}
    <strong>✨ {$queryResult.data.stargazers_count}</strong>{' '}
    <strong>🍴 {$queryResult.data.forks_count}</strong>
  </div>
{/if}

 

 

 

Leave a Reply