{"id":23154755,"url":"https://github.com/ticruz38/graphql-codegen-svelte-apollo","last_synced_at":"2025-08-17T22:31:38.859Z","repository":{"id":43342442,"uuid":"300645996","full_name":"ticruz38/graphql-codegen-svelte-apollo","owner":"ticruz38","description":"Generator plugin that brings Apollo into your Svelte application","archived":false,"fork":false,"pushed_at":"2023-05-23T22:50:54.000Z","size":839,"stargazers_count":49,"open_issues_count":8,"forks_count":19,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-07-13T12:49:56.804Z","etag":null,"topics":["apollo-client","graphql","graphql-generator","typescript"],"latest_commit_sha":null,"homepage":"https://ticruz38.github.io/graphql-codegen-svelte-apollo/","language":"TypeScript","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/ticruz38.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":"2020-10-02T14:46:59.000Z","updated_at":"2024-01-19T18:58:48.000Z","dependencies_parsed_at":"2024-06-18T18:32:13.656Z","dependency_job_id":"b81e8ebb-3471-4d54-abbe-2fd3b13b6fad","html_url":"https://github.com/ticruz38/graphql-codegen-svelte-apollo","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/ticruz38/graphql-codegen-svelte-apollo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ticruz38%2Fgraphql-codegen-svelte-apollo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ticruz38%2Fgraphql-codegen-svelte-apollo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ticruz38%2Fgraphql-codegen-svelte-apollo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ticruz38%2Fgraphql-codegen-svelte-apollo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ticruz38","download_url":"https://codeload.github.com/ticruz38/graphql-codegen-svelte-apollo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ticruz38%2Fgraphql-codegen-svelte-apollo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270918279,"owners_count":24667664,"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","status":"online","status_checked_at":"2025-08-17T02:00:09.016Z","response_time":129,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["apollo-client","graphql","graphql-generator","typescript"],"created_at":"2024-12-17T20:13:56.702Z","updated_at":"2025-08-17T22:31:38.479Z","avatar_url":"https://github.com/ticruz38.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Typescript Svelte Apollo\n[GraphQL Code Generator](https://www.graphql-code-generator.com) plugin to use Apollo in Svelte with full Typescript support.\nBecause Svelte and Apollo share the same reactive programming, Apollo queries are treated like Svelte store. \nHence that generator is all you need if you want to use Apollo with Svelte.\nSee a live example [here](https://ticruz38.github.io/graphql-codegen-svelte-apollo/), the code for this is in the /example folder\n\n## Motivation\n\n[Apollo](https://www.apollographql.com) and [graphql-code-generator](https://graphql-code-generator.com) are a powerfull combination for data management in the front-end.\nUnlike other big frameworks, Svelte was still missing a graphql-code-generator plugin for client queries.\nIt turns out that Svelte with its reactive programming, is particularly well designed to be used together with Apollo\n\n## Note\n\ngraphql-codegen-svelte-apollo is a plugin for [graphql-code-generator](https://graphql-code-generator.com) ecosystem, please refer to their [website](https://graphql-code-generator.com) for documentation relative to the configuration in codegen.yml\n\n## Installation\n\n\n\n\u003cimg alt=\"graphql-codegen-svelte-apollo plugin version\" src=\"https://img.shields.io/npm/v/graphql-codegen-svelte-apollo?color=%23e15799\u0026label=plugin\u0026nbsp;version\u0026style=for-the-badge\"/\u003e\n\nEnsure that your project contains all needed dependencies for this plugin\n\n```shell\nnpm i -S graphql\n\nnpm i -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations graphql-codegen-svelte-apollo\n```\n\n## API Reference\n\n### `clientPath`\n\ntype: `string`\ndefault: `null`\nrequired: true\n\nPath to the apollo client for this project (should point to a file with an apollo-client as default export)\n\n#### Usage Examples\n\n```yml\ngenerates:\npath/to/file.ts:\n plugins:\n   - typescript\n   - typescript-operations\n   - graphql-codegen-svelte-apollo\n config:\n   clientPath: PATH_TO_APOLLO_CLIENT\n```\n\n### `asyncQuery`\ntype: `boolean`\ndefault: `false`\n\nBy default, the plugin only generate observable queries, sometimes it may be useful to generate promise-based queries\n\n#### Usage Examples\n\n```yml\ngenerates:\npath/to/file.ts:\n plugins:\n   - typescript\n   - typescript-operations\n   - graphql-codegen-svelte-apollo\n config:\n   clientPath: PATH_TO_APOLLO_CLIENT\n   asyncQuery: true\n```\n\n## Usage Example\n\n### With Observable queries\n\nFor the given input:\n\n```graphql\nfragment TransactionFragment on TransactionDescription {\n    contractAddress\n    from\n    gasUsed\n    gasPrice\n    input\n    isError\n    to\n    value\n}\n\nquery Transactions($address: String) {\n    transactions(address: $address) {\n        ...TransactionFragment\n    }\n}\n```\n\nAnd the following configuration:\n\n```yaml\nschema: YOUR_SCHEMA_HERE\ndocuments: \"./src/**/*.graphql\"\ngenerates:\npath/to/file.ts:\n plugins:\n   - typescript\n   - typescript-operations\n   - graphql-codegen-svelte-apollo\n config:\n   clientPath: PATH_TO_APOLLO_CLIENT\n```\n\nCodegen will pre-compile the GraphQL operation into a `DocumentNode` object, and generate a ready-to-use Apollo query for each operation you have.\n\nIn you application code, you can import it from the generated file, and use the query in your component code: \n\n```html\n\u003cscript lang=\"ts\"\u003e\n  import { Transactions } from \"codegen\";\n\n  var address = \"0x0000000000000000000000000000\"\n  $: t = Transactions({ address });\n\u003c/script\u003e\n\n\u003cul\u003e\n    {#each $t?.data?.transactions || [] as transaction}\n        \u003cli\u003eSent transaction from {transaction.from} to {transaction.to}\u003c/li\u003e\n    {/each}\n\u003c/ul\u003e\n```\n\nEach time you change the address, the query will re-fetch and show the new results in the template.\n\n### With Async Queries\n\nSometimes, you may need/prefer to have an async query (only available with asyncQuery option set to true)\n\nFor the given input:\n\n```graphql\nfragment TransactionFragment on TransactionDescription {\n    contractAddress\n    from\n    gasUsed\n    gasPrice\n    input\n    isError\n    to\n    value\n}\n\nquery Transactions($address: String) {\n    transactions(address: $address) {\n        ...TransactionFragment\n    }\n}\n```\n\nAnd the following configuration:\n\n```yaml\nschema: YOUR_SCHEMA_HERE\ndocuments: \"./src/**/*.graphql\"\ngenerates:\npath/to/file.ts:\n plugins:\n   - typescript\n   - typescript-operations\n   - graphql-codegen-svelte-apollo\n config:\n   clientPath: PATH_TO_APOLLO_CLIENT\n   asyncQuery: true\n```\n\nCodegen will pre-compile the GraphQL operation into a `DocumentNode` object, and generate a ready-to-use Apollo query for each operation you have.\n\nIn you application code, you can import it from the generated file, and use the query in your component code: \n\n```html\n\u003cscript lang=\"ts\"\u003e\n  import { AsyncTransactions } from \"codegen\";\n\n  var address = \"0x0000000000000000000000000000\"\n\u003c/script\u003e\n\n\u003cul\u003e\n  {#await AsyncTransactions({ address })}\n    Loading...\n  {:then transactions}\n    {#each transactions || [] as transaction}\n        \u003cli\u003eSent transaction from {transaction.from} to {transaction.to}\u003c/li\u003e\n    {/each}\n  {/await}\n\u003c/ul\u003e\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fticruz38%2Fgraphql-codegen-svelte-apollo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fticruz38%2Fgraphql-codegen-svelte-apollo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fticruz38%2Fgraphql-codegen-svelte-apollo/lists"}