{"_id":"@boomfly/svelte-apollo","_rev":"1-1a1615ffab1b698e02754a8dd71f5d66","name":"@boomfly/svelte-apollo","dist-tags":{"latest":"0.4.0"},"versions":{"0.4.0":{"name":"@boomfly/svelte-apollo","version":"0.4.0","author":{"name":"Tim Hall","email":"tim.hall.engr@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/timhall/svelte-apollo.git"},"main":"dist/svelte-apollo.cjs.js","module":"dist/svelte-apollo.es.js","types":"dist/svelte-apollo.d.ts","keywords":["svelte","apollo","graphql"],"scripts":{"build":"rollup -c","dev":"rollup -c -w","prepublishOnly":"npm run build","test":"jest","typecheck":"tsc --noEmit","format":"prettier --write \"src/**/*.ts\""},"dependencies":{},"peerDependencies":{"@apollo/client":"^3.2.0","graphql":"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0","svelte":"^3.0.0"},"devDependencies":{"@apollo/client":"^3.2.3","@rollup/plugin-typescript":"^6.0.0","@types/jest":"^26.0.14","graphql":"^15.3.0","jest":"^26.5.2","prettier":"^2.1.2","rollup":"^2.29.0","rollup-plugin-dts":"^1.4.13","rollup-plugin-filesize":"^9.0.2","svelte":"^3.29.0","ts-jest":"^26.4.1","typescript":"^4.0.3"},"jest":{"testEnvironment":"node","preset":"ts-jest"},"gitHead":"e3a8409990aa7461bcfa9ac9182442216c63276d","description":"Svelte integration for Apollo GraphQL.","bugs":{"url":"https://github.com/timhall/svelte-apollo/issues"},"homepage":"https://github.com/timhall/svelte-apollo#readme","_id":"@boomfly/svelte-apollo@0.4.0","_nodeVersion":"12.11.1","_npmVersion":"6.11.3","dist":{"integrity":"sha512-EJuBLDyO4u0tvTimQxoYju8Hc+sfSZPtHNJq9QFp1m28AxoyRnDn/ZOXmIf62XeLXy9+fpUAQkxrAF/HHvEtuQ==","shasum":"438fe308ea2816d04c86b578ba2daaeac696de3d","tarball":"https://registry.npmjs.org/@boomfly/svelte-apollo/-/svelte-apollo-0.4.0.tgz","fileCount":8,"unpackedSize":67549,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyKoICRA9TVsSAnZWagAA7mEP/iFn2f+uVmVJt/z31oQq\nFvMUWpT8zU7xqzJt+sHMgd5r2/7V9Qebwh3oVUMBrDOvarW5TsfqrcKemfAD\njvylj2/K7nJ0MSL37onEi2NhM+x3C3Dco7kuEm9pCFiDabH85ADRddt6siJt\nxBuiXPA6Th4zAIiyO6qwPyN4oHNqlwXiZxlhtZ8vzLH9fb/CbxBdR2ma44+F\nCVqGX7TFgKJb68kgYzG3+/iK+LhKLXQUHDqLwVTi+as/8rCuKr4gY4ZbYSq6\ncx0foxXC3aqFDRiHUnZFWQlmSG9LxJi2RN/k1XTC20LzPK3pc/uV2Krwe/dZ\nmZs2oOuRZbhCc07VUECXk6RSGtA6DhGZIlHgyV/zB8viWHI2PaiyO6l83QWw\nLSMYE61ngifv3wI3iABGnBe79UCEs18QWIsmclOPkPjxw/6yL9jq7CVEkz9N\nTYA2LiRuJFc0jhN+33nA2/zBDLvT5AHyWxVY8wha431lpBHB5fjD0JZ7DGpj\ntsmDeIJqb0Mxk0CceZ6nncidO/Z2Aij5RbkmI7OrF5WrHO+Hjdmaw/IxERtB\nnCfLg6r7Gf7PeK7FFi+IT7WSEVu3gyEJ+ZPkasmzrUiYoBNxs1PgVWVYCllp\np0mluFm1xVhtILM/J4Skepha156xMwVPA+QAm8LRsaAlLusDYm8sMdK+feGF\nmZEY\r\n=eoLu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSMe8Jex7Ni99UDCtzr8KFysQoisFnhii8rivSD/WRCgIgRNdK3JjnECI/XUwLDY2urQ2dRLpArTbyEoSEwWScAXc="}]},"_npmUser":{"name":"boomfly","email":"boomfly@rambler.ru"},"directories":{},"maintainers":[{"name":"boomfly","email":"boomfly@rambler.ru"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-apollo_0.4.0_1606986247891_0.09792814159806396"},"_hasShrinkwrap":false}},"time":{"created":"2020-12-03T09:04:07.829Z","0.4.0":"2020-12-03T09:04:08.062Z","modified":"2022-04-04T20:08:27.215Z"},"maintainers":[{"name":"boomfly","email":"boomfly@rambler.ru"}],"description":"Svelte integration for Apollo GraphQL.","homepage":"https://github.com/timhall/svelte-apollo#readme","keywords":["svelte","apollo","graphql"],"repository":{"type":"git","url":"git+https://github.com/timhall/svelte-apollo.git"},"author":{"name":"Tim Hall","email":"tim.hall.engr@gmail.com"},"bugs":{"url":"https://github.com/timhall/svelte-apollo/issues"},"license":"MIT","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","readmeFilename":"README.md"}