├── .editorconfig ├── .eslintignore ├── .github └── workflows │ └── test.yml ├── .gitignore ├── .npmignore ├── .vscode ├── extensions.json └── settings.json ├── .yarn ├── plugins │ └── @yarnpkg │ │ ├── plugin-interactive-tools.cjs │ │ └── plugin-version.cjs ├── releases │ └── yarn-3.8.1.cjs └── versions │ ├── 62c01b12.yml │ ├── 8802c3fa.yml │ └── 96ec3b6c.yml ├── .yarnrc.yml ├── LICENSE ├── README.md ├── example ├── .gitignore ├── .vscode │ └── extensions.json ├── README.md ├── index.html ├── jsconfig.json ├── package.json ├── postcss.config.js ├── public │ └── favicon.ico ├── src │ ├── App.vue │ ├── assets │ │ └── timeline.png │ ├── main.js │ └── style.css ├── tailwind.config.js └── vite.config.js ├── package.json ├── renovate.json ├── rollup.config.mjs ├── src ├── __tests__ │ ├── debug-link.spec.ts │ └── mock-devtools.ts ├── debug-link.ts ├── devtools.ts ├── global.d.ts └── index.ts ├── tsconfig.json └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | insert_final_newline = true 6 | 7 | [*.{js,json,yml}] 8 | charset = utf-8 9 | indent_style = space 10 | indent_size = 2 11 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: [push] 4 | 5 | jobs: 6 | test: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - name: Checkout latest changes 10 | uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4 11 | - name: Setup Node 12 | uses: actions/setup-node@v3 13 | with: 14 | node-version: '16' 15 | cache: 'yarn' 16 | - name: Install Dependencies 17 | run: yarn 18 | - name: Run test script 19 | run: yarn test 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | 4 | ### yarn ### 5 | # https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored 6 | 7 | .yarn/* 8 | !.yarn/releases 9 | !.yarn/patches 10 | !.yarn/plugins 11 | !.yarn/sdks 12 | !.yarn/versions 13 | 14 | # if you are NOT using Zero-installs, then: 15 | # comment the following lines 16 | # !.yarn/cache 17 | 18 | # and uncomment the following lines 19 | .pnp.* 20 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .yarn 2 | .eslintignore 3 | .editorconfig 4 | .vscode 5 | rollup.config.js 6 | src/__tests__ 7 | tsconfig.json 8 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "arcanis.vscode-zipfs" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "search.exclude": { 3 | "**/.yarn": true, 4 | "**/.pnp.*": true 5 | }, 6 | "typescript.tsdk": "node_modules/typescript/lib", 7 | "typescript.enablePromptUseWorkspaceTsdk": true 8 | } 9 | -------------------------------------------------------------------------------- /.yarn/versions/62c01b12.yml: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storipress/apollo-vue-devtools/6e608f4b79b6be6c674e404db3991a09d0c88531/.yarn/versions/62c01b12.yml -------------------------------------------------------------------------------- /.yarn/versions/8802c3fa.yml: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storipress/apollo-vue-devtools/6e608f4b79b6be6c674e404db3991a09d0c88531/.yarn/versions/8802c3fa.yml -------------------------------------------------------------------------------- /.yarn/versions/96ec3b6c.yml: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/storipress/apollo-vue-devtools/6e608f4b79b6be6c674e404db3991a09d0c88531/.yarn/versions/96ec3b6c.yml -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | nodeLinker: pnpm 2 | 3 | plugins: 4 | - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs 5 | spec: "@yarnpkg/plugin-interactive-tools" 6 | - path: .yarn/plugins/@yarnpkg/plugin-version.cjs 7 | spec: "@yarnpkg/plugin-version" 8 | 9 | npmScopes: 10 | storipress: 11 | npmRegistryServer: "https://registry.yarnpkg.com" 12 | 13 | yarnPath: .yarn/releases/yarn-3.8.1.cjs 14 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | ----------- 3 | 4 | Copyright (c) 2022 Storipress Developers 5 | Permission is hereby granted, free of charge, to any person 6 | obtaining a copy of this software and associated documentation 7 | files (the "Software"), to deal in the Software without 8 | restriction, including without limitation the rights to use, 9 | copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the 11 | Software is furnished to do so, subject to the following 12 | conditions: 13 | 14 | The above copyright notice and this permission notice shall be 15 | included in all copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 18 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 19 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 20 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 21 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 22 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 23 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 24 | OTHER DEALINGS IN THE SOFTWARE. 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # apollo-vue-devtool: Integrate Apollo with Vue Devtools 2 | 3 |
7 | 8 | 9 |  10 | 11 | ## Usage 12 | 13 | 1. Add the plugin to your Vue project: 14 | ```js 15 | import { createApp } from 'vue' 16 | import Plugin from '@storipress/apollo-vue-devtool' 17 | import App from './App.vue' 18 | 19 | const app = createApp(App) 20 | app.use(Plugin) 21 | app.mount('#app') 22 | ``` 23 | 24 | 2. Add the DebugLink to your Apollo client: 25 | 26 | ```js 27 | import { DebugLink } from '@storipress/apollo-vue-devtool' 28 | import { ApolloClient, ApolloLink, HttpLink } from '@apollo/client/client' 29 | 30 | const client = new ApolloClient({ 31 | link: ApolloLink.from([ 32 | new DebugLink(), 33 | new HttpLink({ 34 | uri: 'http://example.com/graphql', 35 | }), 36 | ]), 37 | }) 38 | ``` 39 | 40 | 3. Now open Vue Devtools and you'll see your queries in the timeline! 41 | 42 | ## Installation 43 | 44 | ### NPM 45 | 46 | ```shell 47 | $ npm install --save-dev @storipress/apollo-vue-devtool 48 | ``` 49 | 50 | ### Yarn 51 | 52 | ```shell 53 | $ yarn add --dev @storipress/apollo-vue-devtool 54 | ``` 55 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /example/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["johnsoncodehk.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 + Vite 2 | 3 | This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 ` 12 |