{"id":13723684,"url":"https://github.com/pateketrueke/svql","last_synced_at":"2025-03-25T02:31:33.550Z","repository":{"id":38421045,"uuid":"190129629","full_name":"pateketrueke/svql","owner":"pateketrueke","description":"FetchQL wrapper for Svelte 3","archived":false,"fork":false,"pushed_at":"2023-03-04T03:53:48.000Z","size":1649,"stargazers_count":61,"open_issues_count":6,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-19T07:11:30.415Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://svelte.dev/repl/57ede36346454489b0f1c57248ee4eb9?version=3.4.4","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pateketrueke.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-06-04T04:34:47.000Z","updated_at":"2023-12-08T20:03:53.000Z","dependencies_parsed_at":"2024-06-19T05:16:37.223Z","dependency_job_id":"eb652ed8-2be4-4ca6-883d-f7b0228401ed","html_url":"https://github.com/pateketrueke/svql","commit_stats":{"total_commits":163,"total_committers":3,"mean_commits":"54.333333333333336","dds":0.06134969325153372,"last_synced_commit":"962f256b9a8d769fc07f8c74720978a6dff023f9"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pateketrueke%2Fsvql","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pateketrueke%2Fsvql/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pateketrueke%2Fsvql/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pateketrueke%2Fsvql/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pateketrueke","download_url":"https://codeload.github.com/pateketrueke/svql/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245351756,"owners_count":20601090,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T01:01:44.378Z","updated_at":"2025-03-25T02:31:33.250Z","avatar_url":"https://github.com/pateketrueke.png","language":"JavaScript","funding_links":[],"categories":["components and libraries"],"sub_categories":["stores and state"],"readme":"\u003e The _easiest_ way to consume GraphQL APIs in Svelte3\n\u003e\n\u003e ![Build status](https://github.com/pateketrueke/svql/workflows/build/badge.svg)\n\u003e [![NPM version](https://badge.fury.io/js/svql.svg)](http://badge.fury.io/js/svql)\n\u003e [![Known Vulnerabilities](https://snyk.io/test/npm/svql/badge.svg)](https://snyk.io/test/npm/svql)\n\n```html\n\u003cscript\u003e\n  import { Out, query, setupClient } from 'svql';\n\n  setupClient({\n    url: 'https://graphql-pokemon2.vercel.app/',\n  });\n\n  const GET_POKEMON_INFO = `\n    query($name: String!) {\n      pokemon(name: $name) {\n        id name image number\n      }\n    }\n  `;\n\n  query(GET_POKEMON_INFO, { name: 'Pikachu' });\n\u003c/script\u003e\n\n\u003cOut nostatus from={GET_POKEMON_INFO} let:data\u003e\n  \u003ch3\u003e{data.pokemon.number}. {data.pokemon.name}\u003c/h3\u003e\n  \u003cimg alt={data.pokemon.name} src={data.pokemon.image} /\u003e\n\u003c/Out\u003e\n```\n\n## How it works.\n\n`svql` uses a [fetchql]() singleton to talk to GraphQL. You can configure it through the `setupClient()` method.\n\nBoth `query` and `mutation` helpers will take the GQL and return a promise (or function that returns a promise, respectively).\n\n### `query(gql[, data[, callback]]): Promise`\n\n\u003e Queries are indexed so you can refer to them as `from={MY_GQL_QUERY}`. `data` is optional, as is the `callback` function. Any truthy value returned by this callback will be used in-place of the regular response.\n\nAccessing those values can be done through `\u003cOut /\u003e` components as shown above, or by watching the returned promises:\n\n```html\n\u003cscript\u003e\n  // ...imports\n  let promise = query(GET_POKEMON_INFO, { name: 'Bulbasaur' });\n\u003c/script\u003e\n\u003c!-- we can use {#await promise}...{/await} --\u003e\n```\n\nRefetching of queries can be done through reactive statements:\n\n```html\n\u003cscript\u003e\n  // ...imports\n  export let name = '';\n  $: query(GET_POKEMON_INFO, { name });\n\u003c/script\u003e\n```\n\nEach time `name` changes, the query re-executes.\n\n### `mutation(gql[, callback]): Function`\n\n\u003e The callback will receive a `commit` function that accepts variables-input as first argument, and optionally a second function to handle the response. Values returned by this function are also promises.\n\nMutations are functions that could result in more work, so you need to be sure and `commit` once you're ready for the actual request:\n\n```html\n\u003cscript\u003e\n  // ...imports\n  export let email = '';\n  let password;\n  let promise;\n  const doLogin = mutation(LOGIN_REQUEST, commit =\u003e function login() {\n    promise = commit({ email, password }, data =\u003e {\n      saveSession(data.login);\n      location.href = '/';\n    });\n  });\n\u003c/script\u003e\n\u003cp\u003eEmail: \u003cinput type=\"email\" bind:value={email} /\u003e\u003c/p\u003e\n\u003cp\u003ePassword: \u003cinput type=\"password\" bind:value={password} /\u003e\u003c/p\u003e\n\u003cbutton on:click={doLogin}\u003eLog in\u003c/button\u003e\n```\n\nSince `mutation()` returns a function, there's no need to setup reactive statements to _refetch_ it. Just calling the generated function is enough.\n\n## Components\n\nYou can access `svql` stores as `conn` and `state` respectively.  However, it is better to use the following components to handle state. :sunglasses:\n\n### `\u003cFailure ... /\u003e`\n\nNo longer shipped, use a separate `Failure` component from [smoo](https://github.com/pateketrueke/smoo).\n\n### `\u003cStatus {from} {label} {pending} {otherwise} /\u003e`\n\nThis takes a `from={promise}` value, then renders its progress, catches the failure, etc.\n\nAvailable props:\n\n- `{from}` \u0026mdash; Promise-like value to handle status changes\n- `{label}` \u0026mdash; Label used for `{:catch error}` handling with `\u003cFailure /\u003e`\n- `{fixed}` \u0026mdash; Setup `\u003cStatus /\u003e` container as fixed, positioned at `left:0;bottom:0` by default\n- `{pending}` \u0026mdash; Message while the promise is being resolved...\n- `{otherwise}` \u0026mdash; Message while once promise has resolved successfully\n\n\u003e With `fixed` you can provide offsets, e.g. `\u003cStatus fixed=\"{{ top: '10vh' }}\" /\u003e`\n\nAvailable slots:\n\n- `pending` \u0026mdash; Replace the `{:await}` block, default is an `\u003ch3 /\u003e`\n- `otherwise` \u0026mdash; Replace the `{:then}` block, default is an `\u003ch3 /\u003e`; it receives `let:result`\n- `exception` \u0026mdash; Replace the  `{:catch}` block, default is `\u003cFailure /\u003e`; it receives `let:error`\n\n### `\u003cOut {nostatus} {loading} {...} let:data /\u003e`\n\nUse this component to access data `from={promise}` inside, or `from={GQL}` to extract it from resolved state.\n\nAvailable props:\n\n- `{nostatus}` \u0026mdash; Boolean; its presence disables the `\u003cStatus /\u003e` render\n- `{loading}` \u0026mdash; Message while the promise is being resolved...\n- `{...}` \u0026mdash; Same props from `\u003cStatus /\u003e`\n- `let:data` \u0026mdash; Unbound `data` inside\n\nAvailable slots:\n\n- `status` \u0026mdash; Replaces the `\u003cStatus /\u003e` render with custom markup; it receives the same props as `\u003cStatus /\u003e`\n- `loading` \u0026mdash; Replace the `{:then}` block, default is an `\u003ch3 /\u003e`; it receives `let:result`\n- `failure` \u0026mdash; Replace the `{:catch}` block, default is `\u003cFailure /\u003e`; it receives `let:error`\n\n### `\u003cIn ... /\u003e`\n\nNo longer shipped, use a separate `Fence` component from [smoo](https://github.com/pateketrueke/smoo).\n\n\u003e Loading states should be bound as `\u003cFence loading={$conn.loading}\u003e...\u003c/Fence\u003e` to properly block the UI.\n\n## Public API\n\n- `setupClient(options[, key])` \u0026mdash; Configure a `FetchQL` singleton with the given `options`, `key` is used for session loading\n- `useClient(options[, key])` \u0026mdash; Returns a `FetchQL` instance with the given `options`, `key` is used for session loading\n- `useToken(value[, key])` \u0026mdash; Update the session-token used for Bearer authentication, `key` is used for session loading\n- `saveSession(data[, key])` \u0026mdash; Serializes any given value as the current session, it MUST be a plain object or null\n- `read(gql|key)` \u0026mdash; Retrieve current value from `state` by key, a shorthand for `$state[key]` values\n- `key(gql)` \u0026mdash; Returns a valid `key` from GQL-strings, otherwise the same value is returned\n- `$state` \u0026mdash; Store with all resolved state by the `fetchql` singleton\n- `$conn` \u0026mdash; Store with connection details during `fetchql` requests\n\n\u003e `sqvl` use **Bearer authentication** by default, so any token found in the session will be sent forth-and-back.\n\nIf you want to change your client's authorization token, you may call `client.setToken()` \u0026mdash; or `useToken()` globally.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpateketrueke%2Fsvql","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpateketrueke%2Fsvql","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpateketrueke%2Fsvql/lists"}