@svelkit/graphql

A lightweight GraphQL client for svelte

What?

Use GraphQL APIs in svelte the svelte way. Either as readable store or using promises.

Why?

Existing solutions (graphql-svelte, @urql/svelte, and others) didn't provide the API we were looking for, features we would not need or are to heavy.

This solutions focuses on a native svelte API using svelte/store.

• Installation
• Usage
• Features
• Polyfills
• License

Installation

npm install @svelkit/graphql

And then import it:

// using es modules
import { useQuery, gql } from '@svelkit/graphql'

// common.js
const { useQuery, gql } = require('@svelkit/graphql')

Alternatively use UNPKG or jsDelivr packages.

Hotlinking from unpkg: (no build tool needed!)

import { useQuery, gql } from 'https://unpkg.com/@svelkit/graphql?module'

Usage

<script>
  import { initGraphQLClient, useQuery, gql } from '@svelkit/graphql'

  initGraphQLClient({ uri: 'https://swapi.graph.cool/' })

  const films = useQuery(gql`
    query {
      allFilms {
        id
        title
        releaseDate
      }
    }
  `)
</script>

{#if $films.fetching} Loading .. {:else if $films.error} Ups... {$films.error.message} {:else}
<ol>
  {#each $films.data.allFilms as film (film.id)}
  <li>{film.title} - {file.releaseDate}</li>
  {/each}
</ol>
{/if}

Features

• readable store or promises
• optional use GET request for queries for cachablity
• query minification to reduce request size
• automatic persisted queries

Polyfills

• URL
• URL#searchParams
• Object.entries
• fetch
• globalThis

License

svelkit is open source software licensed as MIT.