{"_id":"@dreamonkey/graphql-codegen-vue-query-block","_rev":"2-9b88f2d07c51a79901acd3d8d78e307e","name":"@dreamonkey/graphql-codegen-vue-query-block","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@dreamonkey/graphql-codegen-vue-query-block","version":"0.1.0","description":"TODO: Add description","author":{"name":"Dreamonkey Srl","email":"info@dreamonkey.com","url":"https://dreamonkey.com"},"contributors":[{"name":"Yusuf Kandemir","email":"y.kandemir@dreamonkey.com"}],"homepage":"https://github.com/dreamonkey/graphql-codegen-stack/tree/main/packages/vue-query-block#readme","repository":{"type":"git","url":"git+https://github.com/dreamonkey/graphql-codegen-stack.git","directory":"packages/vue-query-block"},"bugs":{"url":"https://github.com/dreamonkey/graphql-codegen-stack/issues"},"license":"MIT","type":"module","sideEffects":false,"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"},"./vite":{"types":"./dist/vite-plugin.d.ts","import":"./dist/vite-plugin.mjs","require":"./dist/vite-plugin.cjs"}},"main":"./dist/index.cjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","peerDependencies":{"@vue/compiler-sfc":"^3.2.0","graphql":"^15.0.0 || ^16.0.0","vite":"^2.0.0 || ^3.0.0 || ^4.0.0"},"devDependencies":{"@types/node":"^16.18.12","@vue/compiler-sfc":"^3.2.47","graphql":"^15.8.0","unbuild":"^1.1.1","vite":"^2.9.15"},"scripts":{"build":"unbuild","test":"echo \"TODO: Implement tests\""},"_id":"@dreamonkey/graphql-codegen-vue-query-block@0.1.0","_integrity":"sha512-t0yO0h+emJ2muapr/291UqkKMfeQ+ZS5ijiuIHgIL21/yfWjkvMiAyLujNkv0cc1dOHm7ZjDQClGbDQyAv+d3g==","_resolved":"/tmp/95d730e145099bb468e5a2b0dd944de5/dreamonkey-graphql-codegen-vue-query-block-0.1.0.tgz","_from":"file:dreamonkey-graphql-codegen-vue-query-block-0.1.0.tgz","_nodeVersion":"18.14.1","_npmVersion":"9.3.1","dist":{"integrity":"sha512-t0yO0h+emJ2muapr/291UqkKMfeQ+ZS5ijiuIHgIL21/yfWjkvMiAyLujNkv0cc1dOHm7ZjDQClGbDQyAv+d3g==","shasum":"378ec44c22f184ba6db2e10cbdbfd61340b5a550","tarball":"https://registry.npmjs.org/@dreamonkey/graphql-codegen-vue-query-block/-/graphql-codegen-vue-query-block-0.1.0.tgz","fileCount":10,"unpackedSize":10135,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjpMZsttCUaUrwlnQ/Icx7PcNoS8664hvOLH2LR6YimwIhAL3cwrksGGluLCAOVJBaBuzYRSClloLvnPI/BL5+UWgW"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkAjCkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUvw/+OeVuaVB/1vGzzXfsSDev1tyA6fxsXa/ijF3M4QigEeOJL51N\r\n7KZCgK0NWO3KbK65H81MneNcjgSVwTOwMc42XQjlTXgud/IWZ8wz8tVCpgtd\r\n7RtF/dDcouV4ZmQRcNzEXKkUvRUnLc2JC+o88vP1rmYM/9VAMjxONywXazaV\r\nD2geLntlkLRn3p533ID4O0OFZZRDCSaxHCYcn1tKJ4XbCVaH+Jwlj73RuVOv\r\nrclU/+uFyyPrstIUWUzV2EAq4R+BzFJuE6l+fd72LMr8HgYTK2xgYvJIfO/j\r\nOZF78nGYZz6nOHfx2gQ9ebfRzL8NZueBJKwj07P3bbkTBsKImnPyMSRDLI1z\r\nbSVpaAZQo1P3QthU5JXAhT8Vox5KKl5WfQ0qRBnd7yg8l0c0JfZI52yYhTJC\r\nt2pAiMSvyg153XAD+BH49BWU+jyunNUzQPLhOQGxuSk+sflEXNh5sk4mH3Mf\r\n4BYBvz/XGfv586q1VyRuV0UAIiae04HMXHqULOiVT0QB0a9jr/XTboBJ4zA8\r\nGPNvzylf9QuoLahC4AlGzfJ/IFLVMxth7/2v/9caDXHSJot+UfJGMzoNLKte\r\nyFf2IblaXIaD+oimoVVUtQjpJ+X4iMhMTzNs1wk4qz+tsHET9gFNUhhXp1wM\r\nLs+KWtN7vyLMZ8jc+1at10yVT1n/XmV7GCw=\r\n=C7G+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ilcallo","email":"p.caleffi@dreamonkey.com"},"directories":{},"maintainers":[{"name":"ilcallo","email":"p.caleffi@dreamonkey.com"},{"name":"mrkappa","email":"k.borghi@dreamonkey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/graphql-codegen-vue-query-block_0.1.0_1677865124001_0.5752362821961721"},"_hasShrinkwrap":false},"0.1.1":{"name":"@dreamonkey/graphql-codegen-vue-query-block","version":"0.1.1","description":"Write your GraphQL documents in Vue SFC `<query>` blocks to generate code with GraphQL Code Generator.","author":{"name":"Dreamonkey Srl","email":"info@dreamonkey.com","url":"https://dreamonkey.com"},"contributors":[{"name":"Yusuf Kandemir","email":"y.kandemir@dreamonkey.com"}],"homepage":"https://github.com/dreamonkey/graphql-codegen-stack/tree/main/packages/vue-query-block#readme","repository":{"type":"git","url":"git+https://github.com/dreamonkey/graphql-codegen-stack.git","directory":"packages/vue-query-block"},"bugs":{"url":"https://github.com/dreamonkey/graphql-codegen-stack/issues"},"license":"MIT","type":"module","sideEffects":false,"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"},"./vite":{"types":"./dist/vite-plugin.d.ts","import":"./dist/vite-plugin.mjs","require":"./dist/vite-plugin.cjs"}},"main":"./dist/index.cjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","peerDependencies":{"@graphql-codegen/core":"^2.6.0 || ^3.0.0","@vue/compiler-sfc":"^3.2.0","graphql":"^15.0.0 || ^16.0.0","vite":"^2.0.0 || ^3.0.0 || ^4.0.0"},"devDependencies":{"@types/node":"^16.18.12","@vue/compiler-sfc":"^3.2.47","graphql":"^15.8.0","unbuild":"^1.1.1","vite":"^2.9.15"},"scripts":{"build":"unbuild","test":"echo \"TODO: Implement tests\""},"_id":"@dreamonkey/graphql-codegen-vue-query-block@0.1.1","_integrity":"sha512-fbqxS0llF9PYmFNfMCf/JJFBkY5XciAR+hzg32kAYFfjR77VQo15QSK6XRU0pnevKEOL/1/T5LUuyXy+dhdVIQ==","_resolved":"/tmp/b2f0d638d3ac80e0b3869e7885d61670/dreamonkey-graphql-codegen-vue-query-block-0.1.1.tgz","_from":"file:dreamonkey-graphql-codegen-vue-query-block-0.1.1.tgz","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-fbqxS0llF9PYmFNfMCf/JJFBkY5XciAR+hzg32kAYFfjR77VQo15QSK6XRU0pnevKEOL/1/T5LUuyXy+dhdVIQ==","shasum":"6ea227e3328e7a91574c13e8c520152b83b5411e","tarball":"https://registry.npmjs.org/@dreamonkey/graphql-codegen-vue-query-block/-/graphql-codegen-vue-query-block-0.1.1.tgz","fileCount":10,"unpackedSize":10688,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCguxv/fltquelKgu8x3TcAgRnckvYPp4Flql9Ww2GAGAIhAI9Q8ROLfbY+2bumB/UgbVOCpSs+jyh11ZQQHnBNV0Qh"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNW/8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJ9A/9HYmgey1YF9VvGqne/Gw/aaulpzNUycaiCgV3V7cNJN8HPTOZ\r\nkO0CLmOR8WJU/vo/xsZGvaPRfbMqVIL+14CNl6Rkvfw7avLBDWXSSWgTifxl\r\nxqs3i3mfimRJ0amXswYUYBFsoGEHyb2XoZAh1KYH5tav8rOjPZzYObhxYdWx\r\nI7GTWURgkntOKWTyB9Gor0ccyPXGSr+90QSHEC3K1WVav/MpN9nuAzQ5A033\r\n2fTrCs/T4eLXhD8qvvtECpbqsvVOf/aki6iWZE0gnpLu7BqmdPszS/jNd4Rb\r\nrT/NCpm+0WmQRXuZIc3HYNye+isud1QZALYCw0fpnLTh6Sl5/60R7ctHKMzM\r\nnT/zQ0I82x6KCZCKgBVqDKtdGhM6ruWee2yGezCJEbsuNKVs2KM7Xvw/7Zfr\r\nH1hwcaiNKQSolKBKTYz+Y1WasQJyXgCKM7NdiWvSN7wt83qiNKVmNdIRwiyo\r\nWY6toW/myTQAGhuKdJasiMlrSBTkHOastOdyUhRtYSQovyiUnrxMZfAosuT/\r\nOqOkgRTHgpxFRUXVW7NgPOj2NcC9eriImlqE6aRjMzOREMG0kWJQTP/oyGc6\r\nfl6DkmwTUjtc60gvbMoFI3OClHU3SIRpRmZR+LAxSzWNgq0foAuB62GAnGTX\r\nHVRaaRf1vuhEVsLqIpFMudD/Gd209RQajGM=\r\n=lemI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ilcallo","email":"p.caleffi@dreamonkey.com"},"directories":{},"maintainers":[{"name":"ilcallo","email":"p.caleffi@dreamonkey.com"},{"name":"mrkappa","email":"k.borghi@dreamonkey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/graphql-codegen-vue-query-block_0.1.1_1681223676121_0.2309514719066874"},"_hasShrinkwrap":false},"0.1.2":{"name":"@dreamonkey/graphql-codegen-vue-query-block","version":"0.1.2","description":"Write your GraphQL documents in Vue SFC `<query>` blocks to generate code with GraphQL Code Generator.","author":{"name":"Dreamonkey Srl","email":"info@dreamonkey.com","url":"https://dreamonkey.com"},"contributors":[{"name":"Yusuf Kandemir","email":"y.kandemir@dreamonkey.com"}],"homepage":"https://github.com/dreamonkey/graphql-codegen-stack/tree/main/packages/vue-query-block#readme","repository":{"type":"git","url":"git+https://github.com/dreamonkey/graphql-codegen-stack.git","directory":"packages/vue-query-block"},"bugs":{"url":"https://github.com/dreamonkey/graphql-codegen-stack/issues"},"license":"MIT","type":"module","sideEffects":false,"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"},"./vite":{"types":"./dist/vite-plugin.d.ts","import":"./dist/vite-plugin.mjs","require":"./dist/vite-plugin.cjs"}},"main":"./dist/index.cjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","peerDependencies":{"@graphql-codegen/core":"^2.6.0 || ^3.0.0 || ^4.0.0","@vue/compiler-sfc":"^3.2.0","graphql":"^15.0.0 || ^16.0.0","vite":"^2.0.0 || ^3.0.0 || ^4.0.0"},"devDependencies":{"@types/node":"^16.18.12","@vue/compiler-sfc":"^3.2.47","graphql":"^15.8.0","unbuild":"^2.0.0","vite":"^2.9.16"},"scripts":{"build":"unbuild","test":"echo \"TODO: Implement tests\""},"_id":"@dreamonkey/graphql-codegen-vue-query-block@0.1.2","_integrity":"sha512-LTobg675FBTMBJkgY2+8mV2ysdbHzHbBSeif8tHo6/NHctLsMepZU4KsPqS7U6G56BUT9HeriSzK7Nk6aSEEsA==","_resolved":"/tmp/cb222f3537c54389d45fae374bdfc326/dreamonkey-graphql-codegen-vue-query-block-0.1.2.tgz","_from":"file:dreamonkey-graphql-codegen-vue-query-block-0.1.2.tgz","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-LTobg675FBTMBJkgY2+8mV2ysdbHzHbBSeif8tHo6/NHctLsMepZU4KsPqS7U6G56BUT9HeriSzK7Nk6aSEEsA==","shasum":"28ef5ff79a360dd4feb0b42451b0149b1928c4f7","tarball":"https://registry.npmjs.org/@dreamonkey/graphql-codegen-vue-query-block/-/graphql-codegen-vue-query-block-0.1.2.tgz","fileCount":14,"unpackedSize":11260,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICogMxzASDuazUgOQzH6OTzlSL4sKi98gb7Zmo7HljibAiEAsEF6v+5ZiNdq2B9ora/HI5tVAQEN1APUYB19X+e7V4o="}]},"_npmUser":{"name":"ilcallo","email":"p.caleffi@dreamonkey.com"},"directories":{},"maintainers":[{"name":"ilcallo","email":"p.caleffi@dreamonkey.com"},{"name":"mrkappa","email":"k.borghi@dreamonkey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/graphql-codegen-vue-query-block_0.1.2_1698231144493_0.30676025839966403"},"_hasShrinkwrap":false}},"time":{"created":"2023-03-03T17:38:43.924Z","0.1.0":"2023-03-03T17:38:44.154Z","modified":"2023-10-25T10:52:24.968Z","0.1.1":"2023-04-11T14:34:36.281Z","0.1.2":"2023-10-25T10:52:24.752Z"},"maintainers":[{"name":"ilcallo","email":"p.caleffi@dreamonkey.com"},{"name":"mrkappa","email":"k.borghi@dreamonkey.com"}],"description":"Write your GraphQL documents in Vue SFC `<query>` blocks to generate code with GraphQL Code Generator.","homepage":"https://github.com/dreamonkey/graphql-codegen-stack/tree/main/packages/vue-query-block#readme","repository":{"type":"git","url":"git+https://github.com/dreamonkey/graphql-codegen-stack.git","directory":"packages/vue-query-block"},"contributors":[{"name":"Yusuf Kandemir","email":"y.kandemir@dreamonkey.com"}],"author":{"name":"Dreamonkey Srl","email":"info@dreamonkey.com","url":"https://dreamonkey.com"},"bugs":{"url":"https://github.com/dreamonkey/graphql-codegen-stack/issues"},"license":"MIT","readme":"# @dreamonkey/graphql-codegen-vue-query-block\n\nWrite your GraphQL documents in Vue SFC `<query>` blocks to generate code with GraphQL Code Generator.\n\n## Installation\n\nMake sure you have installed and configured GraphQL Code Generator first:\n\n- [GraphQL Code Generator | Installation](https://the-guild.dev/graphql/codegen/docs/getting-started/installation)\n\nInstall the package:\n\n```shell\npnpm add -D @dreamonkey/graphql-codegen-vue-query-block\n```\n\n### GraphQL Code Generator config\n\nAdd the loader to your codegen config:\n\n```ts\n// codegen.ts\nimport type { CodegenConfig } from '@graphql-codegen/cli';\n\nconst config: CodegenConfig = {\n  // ...\n  documents: [\n    /* ... other kinds of documents, if any */ {\n      'src/**/*.vue': { loader: '@dreamonkey/graphql-codegen-vue-query-block' },\n    },\n  ],\n  // ...\n};\n\nexport default config;\n```\n\nIf you are using `near-operation-file` preset, do this instead:\n\n```ts\n// codegen.ts\nimport glob from 'fast-glob';\nimport type { CodegenConfig } from '@graphql-codegen/cli';\n\n// A loader can't return multiple results, which completely messes up the near-operation-file preset with glob patterns\n// So, we simply feed the paths one by one, instead of a glob pattern.\n// https://github.com/dotansimha/graphql-code-generator/issues/6543\nconst vueFiles = glob.sync('src/**/*.vue');\nconst vueDocuments: CodegenConfig['documents'] = {};\nfor (const file of vueFiles) {\n  vueDocuments[file] = {\n    loader: '@dreamonkey/graphql-codegen-vue-query-block',\n  };\n}\n\nconst config: CodegenConfig = {\n  // ...\n  documents: [/* ... other kinds of documents, if any */ vueDocuments],\n  // ...\n};\n\nexport default config;\n```\n\n### Vite config\n\nAdd the plugin to your Vite config:\n\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport vueQueryBlock from '@dreamonkey/graphql-codegen-vue-query-block/vite';\n\nexport default defineConfig({\n  // ...\n  plugins: [\n    // ...\n    vue(),\n    // after the Vue plugin\n    vueQueryBlock(),\n  ],\n  // ...\n});\n```\n\n### Quasar Framework (@quasar/app-vite)\n\n(_App Extension is coming soon_) <!-- TODO: Link the app extension when it's ready -->\nIf you are not using the App Extension, you can add the plugin to your `quasar.config.js`:\n\n```js\n// quasar.config.js\nconst { configure } = require('quasar/wrappers');\n\nmodule.exports = configure(function (/* ctx */) {\n  return {\n    // ...\n    build: {\n      // ...\n      vitePlugins: [\n        // ...\n        ['@dreamonkey/graphql-codegen-vue-query-block/vite'],\n        // ...\n      ],\n    },\n    // ...\n  };\n});\n```\n\n## Usage\n\nWrite your GraphQL documents(_queries, mutations, fragments_) in `<query>` blocks:\n\n<!-- prettier-ignore -->\n```html\n<template>\n  <!-- ... -->\n</template>\n\n<script lang=\"ts\" setup>\n// ...\n</script>\n\n<query lang=\"graphql\">\nfragment PostDetails on Post {\n  id\n  title\n  body\n}\n</query>\n```\n\nThen, GraphQL Code Generator will generate the corresponding code according to your configuration.\n\n## Examples\n\n### `near-operation-file` preset\n\n```ts\n// codegen.ts\nimport glob from 'fast-glob';\nimport type { CodegenConfig } from '@graphql-codegen/cli';\n\nconst vueFiles = glob.sync('src/**/*.vue');\nconst vueDocuments: CodegenConfig['documents'] = {};\nfor (const file of vueFiles) {\n  vueDocuments[file] = {\n    loader: '@dreamonkey/graphql-codegen-vue-query-block',\n  };\n}\n\nconst config: CodegenConfig = {\n  schema: process.env.GRAPHQL_SCHEMA,\n  documents: [vueDocuments],\n  generates: {\n    './src/generated/graphql.ts': {\n      plugins: ['typescript'],\n    },\n\n    'src/': {\n      preset: 'near-operation-file',\n      presetConfig: {\n        extension: '.ts',\n        baseTypesPath: 'generated/graphql.ts',\n      },\n      plugins: [\n        'typescript-operations',\n        'typed-document-node',\n        '@dreamonkey/graphql-codegen-vue-apollo-plugin',\n      ],\n    },\n  },\n};\n\nexport default config;\n```\n\n<!-- prettier-ignore -->\n```html\n<!-- src/components/post.vue -->\n<template>\n  <q-spinner v-if=\"loading\" />\n  <q-btn v-else-if=\"!post\" label=\"Not found! Click to retry\" @click=\"refetch\" />\n  <q-item v-else clickable @click=\"logPost(post)\">\n    <q-item-section>\n      <q-item-label>{{ post.title }}</q-item-label>\n      <q-item-label caption>{{ post.body }}</q-item-label>\n    </q-item-section>\n  </q-item>\n</template>\n\n<script lang=\"ts\" setup>\n// As we configured the extension to be .ts, the generated code will be in .ts files under the same name\n// post.vue -> post.ts (can be imported as './post')\nimport { useGetPostQuery, PostDetailsFragment } from './post';\n\nconst { post, loading, refetch } = useGetPostQuery({ id: '1' });\n\n// You can use the generated fragment type\nfunction logPost(post: PostDetailsFragment) {\n  console.log(post);\n}\n</script>\n\n<query lang=\"graphql\">\nfragment PostDetails on Post {\n  id\n  title\n  body\n}\n\nquery getPost($id: ID!) {\n  post(id: $id) {\n    ...PostDetails\n  }\n}\n</query>\n```\n\n## Donate\n\nIf you appreciate the work that went into this package, please consider [donating](https://github.com/sponsors/dreamonkey).\n","readmeFilename":"README.md"}