{"id":19311247,"url":"https://github.com/quasarframework/app-extension-apollo","last_synced_at":"2025-05-16T11:06:11.763Z","repository":{"id":37593255,"uuid":"174594291","full_name":"quasarframework/app-extension-apollo","owner":"quasarframework","description":"The official Quasar App-Extension for Apollo and GraphQL!","archived":false,"fork":false,"pushed_at":"2025-03-11T06:36:17.000Z","size":900,"stargazers_count":113,"open_issues_count":1,"forks_count":18,"subscribers_count":5,"default_branch":"dev","last_synced_at":"2025-05-10T16:49:20.018Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://quasar.dev","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/quasarframework.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-03-08T19:10:54.000Z","updated_at":"2025-04-10T08:56:26.000Z","dependencies_parsed_at":"2022-08-19T00:52:55.619Z","dependency_job_id":"b7fed9a6-7a35-4e9b-b59c-a65bfe58a437","html_url":"https://github.com/quasarframework/app-extension-apollo","commit_stats":{"total_commits":138,"total_committers":15,"mean_commits":9.2,"dds":0.8260869565217391,"last_synced_commit":"6e0795211cb9c5e44ed6d1e171d1607895553dc0"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quasarframework%2Fapp-extension-apollo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quasarframework%2Fapp-extension-apollo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quasarframework%2Fapp-extension-apollo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quasarframework%2Fapp-extension-apollo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/quasarframework","download_url":"https://codeload.github.com/quasarframework/app-extension-apollo/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254518383,"owners_count":22084374,"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-11-10T00:28:25.932Z","updated_at":"2025-05-16T11:06:06.756Z","avatar_url":"https://github.com/quasarframework.png","language":"JavaScript","readme":"# app-extension-apollo\n\n## Introduction\n\nThis is the official Quasar app extension for adding GraphQL to your Quasar\nproject.\n\nThis AE uses [Apollo Client](https://www.apollographql.com) and [Vue Apollo](https://v4.apollo.vuejs.org).\n\n## Installation\n\n```sh\nquasar ext add @quasar/apollo\n```\n\n**NOTE:** As of 2.1.0-beta.1, version 2 is now in the dev and default branch of the repository. It is also the version you'll get with the \"normal\" `@quasar/apollo` package. No need to use `@next` tag anymore.\n\n**IMPORTANT** Since version 2.2.0-beta.2 we externalized all deps for this AE: `graphql`, `graphql-tag`, `@apollo/client` and `@vue/apollo-composable`. If you installed a previous version, rerun `quasar ext add @quasar/apollo` command to have compatible deps added to your project's `package.json`.\n\nVersion 1 has been deprecated and is no longer supported. If you wish to use it, you can install it with `@quasar/apollo@1.0.0-beta.8`.\n\nQuasar CLI will retrieve the extension from NPM\n([@quasar/quasar-app-extension-apollo](https://www.npmjs.com/package/@quasar/quasar-app-extension-apollo))\n\nThe extension will add a configuration file into `src/apollo` and a boot file.\n\n## Config File Entry\n\n**IMPORTANT** You'll need to manually register the boot file in `quasar.conf.js \u003e boot`.\n\nLike so:\n```js\nexport default configure((/* ctx */) =\u003e {\n  return {\n    boot: [\n      'apollo'\n    ],\n  // ....\n}\n```\n\n### Prompts\n\nYou will be prompted if you wish to use GraphQL subscriptions, if you\nanswer yes, you will be prompted which subscription transport you wish to use. Available options are:\n\n- Web Socket ([graphql-ws](https://github.com/enisdenjo/graphql-ws))\n- SSE (Server-Sent Events) ([graphql-sse](https://github.com/enisdenjo/graphql-sse))\n\nAfter selecting the transport, the necessary dependencies will be installed and the initialization code\nwill be scaffolded for you.\n\n## Uninstall\n\n```sh\nquasar ext remove @quasar/apollo\n```\n\nYou might also wish to remove the added directory `src/apollo` and related boot file.\n\n## Apollo client options\n\nApollo client options can be customized in\n`src/apollo/index.(ts|js)`.\n\nYou will need either to set the GraphQL endpoint in it, or set it as an\nenvironment variable before running Quasar:\n\n```sh\nGRAPHQL_URI=https://prod.example.com/graphql quasar build\nGRAPHQL_URI=https://dev.example.com/graphql quasar dev\n```\n\nIf you don't have a GraphQL endpoint yet, you can create one to experiment\nwith at [FakeQL](https://fakeql.com) or other similar services.\n\nIf you are using GraphQL subscriptions, you will also need to set the\nWebSocket endpoint as an environment variable:\n\n```sh\nGRAPHQL_URI=https://prod.example.com/graphql GRAPHQL_WS_URI=wss://prod.example.com/graphql quasar build\nGRAPHQL_URI=https://dev.example.com/graphql GRAPHQL_WS_URI=wss://dev.example.com/graphql quasar dev\n```\n\nYou can [use dotenv in quasar.config file](https://quasar.dev/quasar-cli-vite/handling-process-env#using-dotenv)\nto set these environment variables in a more convenient way, if you wish.\n\n## Usage\n\nCheck the guide in [Vue Apollo docs](https://v4.apollo.vuejs.org/guide-composable/setup.html).\n\nExample usage:\n\n`src/pages/Index.vue`\n\n```html\n\u003ctemplate\u003e\n  \u003cq-page class=\"row items-center justify-evenly\"\u003e\n    \u003cdiv v-if=\"loading\"\u003eLoading...\u003c/div\u003e\n    \u003cdiv v-else-if=\"error\"\u003eError: {{ error.message }}\u003c/div\u003e\n    \u003cdiv v-else-if=\"result \u0026\u0026 result.post\"\u003e\n      \u003cdiv\u003eid: {{ result.post.id }}\u003c/div\u003e\n      \u003cdiv\u003etitle: {{ result.post.title }}\u003c/div\u003e\n    \u003c/div\u003e\n\n    ...\n  \u003c/q-page\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nimport { useQuery } from '@vue/apollo-composable'\nimport { gql } from '@apollo/client/core'\n\nconst { result, loading, error } = useQuery(gql`\n  query getPosts {\n    post(id: \"3\") {\n      id\n      title\n    }\n  }\n`)\n```\n\n## Multiple apollo clients setup\n\nUn-comment the relevant code in `boot/apollo.(ts|js)`\n\nThe following is an example using `clientA` instead of the default client:\n\n```ts\n// ...\nconst { result, loading, error } = useQuery(\n  gql`\n    query getPosts {\n      post(id: \"3\") {\n        id\n        title\n      }\n    }\n  `,\n  null,\n  { clientId: 'clientA' },\n)\n// ...\n```\n\n## Tooling\n\nAn `apollo.config.js` configuration file for [Apollo GraphQL VSCode extension](https://www.apollographql.com/docs/devtools/editor-plugins/) ((`apollographql.vscode-apollo`)) will be automatically scaffolded.\n\nYou should fill in the `client.service.url` property with the URL of the server exposing your GraphQL schema, check [`client.service` documentation](https://www.apollographql.com/docs/devtools/apollo-config/#clientservice) to learn about other options.\n\nThis extension will automatically connect to your remote server, read your GraphQL schema and provide autocomplete/schema errors detection for your GraphQL queries.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquasarframework%2Fapp-extension-apollo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquasarframework%2Fapp-extension-apollo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquasarframework%2Fapp-extension-apollo/lists"}