svelte-apollo/package.json

{
  "name": "svelte-apollo",
  "version": "0.5.0",
  "author": "Tim Hall <tim.hall.engr@gmail.com>",
  "license": "MIT",
  "repository": "https://github.com/timhall/svelte-apollo.git",
  "type": "module",
  "main": "./dist/svelte-apollo.js",
  "exports": {
    ".": "./dist/svelte-apollo.js"
  },
  "types": "dist/svelte-apollo.d.ts",
  "keywords": [
    "svelte",
    "apollo",
    "graphql",
    "svelte-kit"
  ],
  "peerDependencies": {
    "@apollo/client": "^3",
    "graphql": "*",
    "svelte": "^3"
  },
  "devDependencies": {
    "@apollo/client": "^3.5.9",
    "@jest/globals": "^27.5.1",
    "@rollup/plugin-typescript": "^6.1.0",
    "graphql": "^15.8.0",
    "jest": "^27.5.1",
    "prettier": "^2.5.1",
    "rollup": "^2.67.3",
    "rollup-plugin-dts": "^1.4.14",
    "rollup-plugin-filesize": "^9.1.2",
    "svelte": "^3.46.4",
    "ts-jest": "^27.1.3",
    "tslib": "^2.3.1",
    "typescript": "^4.5.5"
  },
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "test": "jest",
    "typecheck": "tsc --noEmit",
    "format": "prettier --write \"src/**/*.ts\""
  },
  "readme": "# svelte-apollo\n\nSvelte integration for Apollo GraphQL.\n\n## Example\n\nThe following simple example shows how to run a simple query with svelte-apollo.\n\n```svelte\n<!-- App.svelte -->\n<Books />\n\n<script>\n  import { ApolloClient } from \"@apollo/client\";\n  import { setClient } from \"svelte-apollo\";\n  import Books from \"./Books.svelte\";\n\n  // 1. Create an Apollo client and pass it to all child components\n  //    (uses svelte's built-in context)\n  const client = new ApolloClient({\n    /* ... */\n  });\n  setClient(client);\n</script>\n```\n\n```svelte\n<!-- Books.svelte -->\n<script>\n  import { query } from \"svelte-apollo\";\n  import { GET_BOOKS } from \"./queries\";\n\n  // 2. Execute the GET_BOOKS GraphQL query using the Apollo client\n  //    -> Returns a svelte store of promises that resolve as values come in\n  const books = query(GET_BOOKS);\n</script>\n\n<!-- 3. Use $books (note the \"$\"), to subscribe to query values -->\n{#if $books.loading}\n  Loading...\n{:else if $books.error}\n  Error: {$books.error.message}\n{:else}\n  {#each $books.data.books as book}\n    {book.title} by {book.author.name}\n  {/each}\n{/if}\n```\n\n## API\n\n<a href=\"#query\" name=\"query\">#</a> <b>query</b>(<i>document</i>[, <i>options</i>])\n\nQuery an Apollo client, returning a readable store of result values.\nUses Apollo's [`watchQuery`](https://www.apollographql.com/docs/react/api/apollo-client.html#ApolloClient.watchQuery),\nfor fetching from the network and watching the local cache for changes.\nIf the client is hydrating after SSR, it attempts a `readQuery` to synchronously check the cache for values.\n\n```svelte\n<script>\n  import { query } from \"svelte-apollo\";\n  import { GET_BOOKS } from \"./queries\";\n\n  const books = query(GET_BOOKS, {\n    // variables, fetchPolicy, errorPolicy, and others\n  });\n\n  function reload() {\n    books.refetch();\n  }\n</script>\n\n<ul>\n  {#if $books.loading}\n    <li>Loading...</li>\n  {:else if $books.error}\n    <li>ERROR: {$books.error.message}</li>\n  {:else}\n    {#each $books.data.books as book (book.id)}\n      <li>{book.title} by {book.author.name}</li>\n    {/each}\n  {/if}\n</ul>\n\n<button on:click=\"{reload}\">Reload</button>\n```\n\nReactive variables are supported with `refetch`:\n\n```svelte\n<script>\n  import { query } from \"svelte-apollo\";\n  import { SEARCH_BY_AUTHOR } from \"./queries\";\n\n  export let author;\n  let search = \"\";\n\n  const books = query(SEARCH_BY_AUTHOR, {\n    variables: { author, search },\n  });\n\n  // `books` is refetched when author or search change\n  $: books.refetch({ author, search });\n</script>\n\nAuthor: {author}\n<label>Search <input type=\"text\" bind:value=\"{search}\" /></label>\n\n<ul>\n  {#if $books.loading}\n    <li>Loading...</li>\n  {:else if $books.error}\n    <li>ERROR: {$books.error.message}</li>\n  {:else if $books.data}\n    {#each $books.data.books as book (book.id)}\n      <li>{book.title}</li>\n    {/each}\n  {:else}\n    <li>No books found</li>\n  {/if}\n</ul>\n```\n\n<a href=\"#mutation\" name=\"mutation\">#</a> <b>mutation</b>(<i>document</i>[, <i>options</i>])\n\nPrepare a GraphQL mutation with the Apollo client, using Apollo's [`mutate`](https://www.apollographql.com/docs/react/api/apollo-client.html#ApolloClient.mutate).\n\n```svelte\n<script>\n  import { mutation } from \"svelte-apollo\";\n  import { ADD_BOOK } from \"./queries\";\n\n  const addBook = mutation(ADD_BOOK);\n  let title = \"\";\n  let author = \"\";\n\n  async function handleSubmit() {\n    try {\n      await addBook({ variables: { title, author } });\n    } catch (error) {\n      // TODO\n    }\n  }\n</script>\n\n<form on:submit|preventDefault=\"{handleSubmit}\">\n  <label for=\"book-author\">Author</label>\n  <input type=\"text\" id=\"book-author\" bind:value=\"{author}\" />\n\n  <label for=\"book-title\">Title</label>\n  <input type=\"text\" id=\"book-title\" bind:value=\"{title}\" />\n\n  <button type=\"submit\">Add Book</button>\n</form>\n```\n\n<a href=\"#subscribe\" name=\"subscribe\">#</a> <b>subscribe</b>(<i>document</i>[, <i>options</i>])\n\nSubscribe 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).\n\n```svelte\n<script>\n  import { subscribe } from \"svelte-apollo\";\n  import { NEW_BOOKS } from \"./queries\";\n\n  const newBooks = subscribe(NEW_BOOKS);\n</script>\n\n{#if $newBooks.loading}\n  Waiting for new books...\n{:else if $newBooks.data}\n  New Book: {$newBooks.data.book}\n{/if}\n```\n\n<a href=\"#restore\" name=\"restore\">#</a> <b>restore</b>(<i>document</i>, <i>options</i>)\n\nRestore a previously executed query (e.g. via preload) into the Apollo cache.\n\n```svelte\n<script context=\"module\">\n  import client from \"./client\";\n  import { GET_BOOKS } from \"./queries\";\n\n  export async function preload() {\n    return {\n      preloaded: await client.query({ query: GET_BOOKS }),\n    };\n  }\n</script>\n\n<script>\n  import { restore } from \"svelte-apollo\";\n\n  export let preloaded;\n\n  // Load preloaded values into client's cache\n  restore(GET_BOOKS, preloaded);\n</script>\n```\n\n<a href=\"#setClient\" name=\"setClient\">#</a> <b>setClient</b>(<i>client</i>)\n\nSet an Apollo client for the current component's and all child components' contexts.\n\n```svelte\n<!-- Parent.svelte -->\n<script>\n  import { setClient } from \"svelte-apollo\";\n  import client from \"./client\";\n\n  setClient(client);\n</script>\n```\n\n<a href=\"#getClient\" name=\"getClient\">#</a> <b>getClient</b>()\n\nGet an Apollo client from the current component's context.\n\n```svelte\n<!-- Child.svelte -->\n<script>\n  import { getClient } from \"svelte-apollo\";\n\n  const client = getClient();\n</script>\n```\n"
}