Svelte Relay

Easily use GraphQL in Svelte, powered by the production-ready Relay runtime.

Features

Relay bindings for Svelte.

Example

1. Set the Relay Environment into the context

<script>
    import { setRelayEnvironment } from 'svelte-relay';
    import myEnvironment from './environment';

    setRelayEnvironment(myEnvironment);
</script>

2. Write Queries

<script>
    import { getQuery } from 'svelte-relay';
    // This is defined in the next section below.
    import Artist from './Artist';

    const query = getQuery(
        graphql`
            query ArtistQuery($artistID: String!) {
                # The root field for the query
                artist(id: $artistID) {
                    # A reference to your fragment container
                    ...ArtistHeader_artist
                }
            }
        `,
        {
            artistID: 'some-id',
        },
    );
</script>

{#await $query}
    <div>Loading</div>
{:then data}
    <Artist artist="{data.artist}" />
{:catch error}
    <div>{error.message}</div>
{/await}

3. Use Fragments

<script>
    import { getFragment } from 'svelte-relay';

    export let artist;

    const data = getFragment(
        graphql`
            # This fragment is declaring that this component
            # needs an Artist, and these specific fields on
            # the Artist in order to render. Relay will
            # guarantee that this data is fetched and available
            # for this component.
            fragment ArtistHeader_artist on Artist {
                href
                bio
                name
                image {
                    url
                }
            }
        `,
        artist,
    );
</script>

<a href="{data.href}">
    <img src="{data.image.url}" />
    <div>
        <h1>{data.name}</h1>
        <h3>{data.bio}</h3>
    </div>
</a>