@sprocketbot/gql-stores

This package wraps @urql/core as an alternative to @urql/svelte.

Instead of the context based approach taken by urql; this package uses a store approach to make operations easier to abstract outside of your components.

Examples

Simple Query

People.store.ts

1// Based on the GraphQL Zero API
2// First, instantiate an urql client
3import {Client} from "@urql/core";
4export const client = new Client({url: "https://graphqlzero.almansi.me/api"});
5
6// Create your return type (cannot be introspected)
7type PeopleQueryValue = {
8    users: {
9        data: {
10            id: string;
11            name: string;
12        }[];
13    };
14};
15
16// Write your query; be careful that it matches the type your wrote
17const query = gql<PeopleQueryValue>`
18    query {
19        users {
20            data {
21                name
22                id
23            }
24        }
25    }
26`;
27
28// Finally, instantiate your store:
29export const PeopleQuery = new QueryStore(client, query, {});

+page.svelte

1<script lang="ts">
2    import {PeopleQuery} from "./People.store";
3</script>
4
5<!-- Simple Rendering -->
6<ul>
7    <!-- Wait for fetching to complete -->
8    <!-- Data is undefined until fetch completes -->
9    {#if $PeopleQuery.fetching}
10        <li>Loading...</li>
11        <!-- Check for success -->
12    {:else if $PeopleQuery.success}
13        <!-- Access query results -->
14        {#each $PeopleQuery.data.users.data as person}
15            <li>{person.name}</li>
16        {/each}
17    {/if}
18</ul>
19
20<!-- Checking for errors -->
21{#if $PeopleQuery.errors}
22    {#if $PeopleQuery.errors.message}
23        <!-- Combines all other messages -->
24        {$PeopleQuery.errors.message}
25    {/if}
26    {#if $PeopleQuery.errors.graphQLErrors}
27        {#each $PeopleQuery.errors.graphQLErrors as err}
28            <!-- Access individual messages -->
29            <p>{err.message}</p>
30        {/each}
31    {/if}
32{/if}

Paginated Query

Posts.store.ts

1// Based on the GraphQL Zero API
2// First, instantiate an urql client
3import {Client} from "@urql/core";
4export const client = new Client({url: "https://graphqlzero.almansi.me/api"});
5
6// Define types
7
8export type PostsValue = {
9    posts: {
10        links: {
11            prev?: {page: number};
12            next?: {page: number};
13        };
14        data: {
15            id: number;
16            user: {id: number; name: string};
17            title: string;
18            body: string;
19        }[];
20    };
21};
22
23export type PostsVariables = {
24    page: number;
25};
26
27// Define Query; note the variables generic
28const query = gql<PostsValue, PostsVariables>`
29    query ($page: Int!) {
30        posts(options: {paginate: {limit: 5, page: $page}}) {
31            links {
32                prev {
33                    page
34                }
35                next {
36                    page
37                }
38            }
39            data {
40                user {
41                    id
42                    name
43                }
44                title
45                body
46                id
47            }
48        }
49    }
50`;
51
52// Instantiate store; initial variables state is required
53export const Posts = new QueryStore(client, query, {page: 1});

+page.svelte

1<script lang="ts">
2    import {Posts} from "./Posts.store";
3
4    // Helper functions
5    function prevPage() {
6        const data = $Posts.data
7        if (!data || !data.posts.links.prev) return;
8        // Update variables
9        // This triggers a requery
10        Posts.variables = { page: data.posts.links.prev.page}
11    }
12    function nextPage() {
13        const data = $Posts.data
14        if (!data || !data.posts.links.next) return;
15        // Update variables
16        // This triggers a requery
17        Posts.variables = { page: data.posts.links.next.page}
18    }
19</script>
20
21<!-- If we are fetching and don't have data; show loading -->
22<!-- In this case, if we have data we will continue to show that -->
23{#if $Posts.fetching && !$Posts.data}
24    Loading...
25{:else if $Posts.data}
26    <!-- If we have data -->
27    <div>
28        <!-- Pagination -->
29        <button
30            disabled={!$Posts.data.posts.links.prev || $Posts.fetching}
31            on:click={prevPage}
32        >
33            {`< ${$Posts.data.posts.links.prev?.page ?? " "} -`}
34        </button>
35        <span>{$Posts.variables.page}</span>
36        <button
37            disabled={!$Posts.data.posts.links.next || $Posts.fetching}
38            on:click={nextPage}
39        >
40            {`- ${$Posts.data.posts.links.next?.page ?? " "} >`}
41        </button>
42    </div>
43    <!-- Render posts; this is the same as the people example -->
44    {#each $Posts.data.posts.data as post}
45        <div>
46            <h2>{post.title}</h2>
47            <h4>{post.user.name}</h4>
48            <p>{post.body}</p>
49        </div>
50    {/each}
51{/if}

Mutation

CreateUser.mutation.ts

1import {Mutation} from "$lib/Mutation";
2import {gql} from "@urql/core";
3import {client} from "../client";
4
5export type CreatePersonValue = {
6    createUser: {
7        name: string;
8        email: string;
9        id: number;
10    };
11};
12export type CreatePersonVariables = {
13    input: {
14        name: string;
15        username: string;
16        email: string;
17    };
18};
19
20const mutation = gql<CreatePersonValue, CreatePersonVariables>`
21    mutation ($input: CreateUserInput!) {
22        createUser(input: $input) {
23            name
24            email
25            id
26        }
27    }
28`;
29
30export const CreatePerson = Mutation(client, mutation);
31
32
33// Usage
34let createUserInput: CreatePersonVariables["input"] = {
35    name: "Dave",
36    username: "dave4", 
37    email: "dave@dave.com"
38};
39
40const createPerson = await CreatePerson({ input: createUserInput })