Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/timhall/svelte-apollo

Svelte integration for Apollo GraphQL
https://github.com/timhall/svelte-apollo

Last synced: about 7 hours ago
JSON representation

Svelte integration for Apollo GraphQL

Awesome Lists containing this project

README 

        
# svelte-apollo



Svelte integration for Apollo GraphQL.



## Example



The following simple example shows how to run a simple query with svelte-apollo.



```svelte



  import { ApolloClient } from "@apollo/client/core";

  import { setClient } from "svelte-apollo";

  import Books from "./Books.svelte";



  // 1. Create an Apollo client and pass it to all child components

  //    (uses svelte's built-in context)

  const client = new ApolloClient({

    /* ... */

  });

  setClient(client);



```



```svelte



  import { query } from "svelte-apollo";

  import { GET_BOOKS } from "./queries";



  // 2. Execute the GET_BOOKS GraphQL query using the Apollo client

  //    -> Returns a svelte store of promises that resolve as values come in

  const books = query(GET_BOOKS);



{#if $books.loading}

  Loading...

{:else if $books.error}

  Error: {$books.error.message}

{:else}

  {#each $books.data.books as book}

    {book.title} by {book.author.name}

  {/each}

{/if}

```



## API



# query(document[, options])



Query an Apollo client, returning a readable store of result values.

Uses Apollo's [`watchQuery`](https://www.apollographql.com/docs/react/api/apollo-client.html#ApolloClient.watchQuery),

for fetching from the network and watching the local cache for changes.

If the client is hydrating after SSR, it attempts a `readQuery` to synchronously check the cache for values.



```svelte



  import { query } from "svelte-apollo";

  import { GET_BOOKS } from "./queries";



  const books = query(GET_BOOKS, {

    // variables, fetchPolicy, errorPolicy, and others

  });



  function reload() {

    books.refetch();

  }



    

      {#if $books.loading}

        
  • Loading...
    • 

      {:else if $books.error}

        
  • ERROR: {$books.error.message}
    • 

      {:else}

        {#each $books.data.books as book (book.id)}

          
  • {book.title} by {book.author.name}
    • 

        {/each}

      {/if}




Reload

```



Reactive variables are supported with `refetch`:



```svelte



  import { query } from "svelte-apollo";

  import { SEARCH_BY_AUTHOR } from "./queries";



  export let author;

  let search = "";



  const books = query(SEARCH_BY_AUTHOR, {

    variables: { author, search },

  });



  // `books` is refetched when author or search change

  $: books.refetch({ author, search });



Author: {author}

Search 



    

      {#if $books.loading}

        
  • Loading...
    • 

      {:else if $books.error}

        
  • ERROR: {$books.error.message}
    • 

      {:else if $books.data}

        {#each $books.data.books as book (book.id)}

          
  • {book.title}
    • 

        {/each}

      {:else}

        
  • No books found
    • 

      {/if}



```



# mutation(document[, options])



Prepare a GraphQL mutation with the Apollo client, using Apollo's [`mutate`](https://www.apollographql.com/docs/react/api/apollo-client.html#ApolloClient.mutate).



```svelte



  import { mutation } from "svelte-apollo";

  import { ADD_BOOK } from "./queries";



  const addBook = mutation(ADD_BOOK);

  let title = "";

  let author = "";



  async function handleSubmit() {

    try {

      await addBook({ variables: { title, author } });

    } catch (error) {

      // TODO

    }

  }



  Author

  



  Title

  



  Add Book



```



# subscribe(document[, options])



Subscribe using an Apollo client, returning a store that is compatible with `{#await $...}`. Uses Apollo's [`subscribe`](https://www.apollographql.com/docs/react/api/apollo-client#ApolloClient.subscribe).



```svelte



  import { subscribe } from "svelte-apollo";

  import { NEW_BOOKS } from "./queries";



  const newBooks = subscribe(NEW_BOOKS);



{#if $newBooks.loading}

  Waiting for new books...

{:else if $newBooks.data}

  New Book: {$newBooks.data.book}

{/if}

```



# restore(document, options)



Restore a previously executed query (e.g. via preload) into the Apollo cache.



```svelte



  import client from "./client";

  import { GET_BOOKS } from "./queries";



  export async function preload() {

    return {

      preloaded: await client.query({ query: GET_BOOKS }),

    };

  }



  import { restore } from "svelte-apollo";



  export let preloaded;



  // Load preloaded values into client's cache

  restore(GET_BOOKS, preloaded);



```



# setClient(client)



Set an Apollo client for the current component's and all child components' contexts.



```svelte



  import { setClient } from "svelte-apollo";

  import client from "./client";



  setClient(client);



```



# getClient()



Get an Apollo client from the current component's context.



```svelte



  import { getClient } from "svelte-apollo";



  const client = getClient();



```