{"_id":"@dreamonkey/graphql-codegen-vue-apollo-plugin","_rev":"2-44c41f39af684014ef280f785afd038f","name":"@dreamonkey/graphql-codegen-vue-apollo-plugin","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@dreamonkey/graphql-codegen-vue-apollo-plugin","version":"0.1.0","description":"graphql-typed-document-node compatible GraphQL Code Generator plugin for Vue Apollo","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/codegen-plugin#readme","repository":{"type":"git","url":"git+https://github.com/dreamonkey/graphql-codegen-stack.git","directory":"packages/codegen-plugin"},"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"}},"main":"./dist/index.cjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","peerDependencies":{"@graphql-codegen/near-operation-file-preset":"^2.4.4","@graphql-codegen/typed-document-node":"^2.3.6","@graphql-codegen/typescript":"^2.8.1","@graphql-codegen/typescript-operations":"^2.5.6","graphql":"^15.0.0 || ^16.0.0"},"devDependencies":{"@types/node":"^16.18.12","graphql":"^15.8.0","unbuild":"^1.1.1"},"dependencies":{"@graphql-codegen/plugin-helpers":"^2.7.2"},"scripts":{"build":"unbuild","test":"echo \"TODO: Implement tests\""},"_id":"@dreamonkey/graphql-codegen-vue-apollo-plugin@0.1.0","_integrity":"sha512-QmNqtsTsXh32IbcARfhMWMzOPtNo/YBM+x+7ihuQX7mGxiPFeMa9HxcaI4teg8m/cajVSlhXUZSl46zmr/upkg==","_resolved":"/tmp/ab6aa905f36a0ad4acc345eb31698ccd/dreamonkey-graphql-codegen-vue-apollo-plugin-0.1.0.tgz","_from":"file:dreamonkey-graphql-codegen-vue-apollo-plugin-0.1.0.tgz","_nodeVersion":"18.14.1","_npmVersion":"9.3.1","dist":{"integrity":"sha512-QmNqtsTsXh32IbcARfhMWMzOPtNo/YBM+x+7ihuQX7mGxiPFeMa9HxcaI4teg8m/cajVSlhXUZSl46zmr/upkg==","shasum":"a6706deff1d8e030e994149794019692a8056dcc","tarball":"https://registry.npmjs.org/@dreamonkey/graphql-codegen-vue-apollo-plugin/-/graphql-codegen-vue-apollo-plugin-0.1.0.tgz","fileCount":7,"unpackedSize":25521,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSOO28XtRLSJIDGpLtOLZIM9BBso3pLHc27r2CB62yLAIhAK4h4vGXS4BhQJY+LC9uV9AvgblO6B/n9f0ektSXNRFU"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkAjCgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnuA/+M/bZSp6kBhpSDiUVvmBe6mUdBRqbJZTMiA9xA5nrrkmfAsYT\r\n6/SCyu9Unc3vm+o8pTQNKY4LA6/Jlmfh284GXgwLJvC+ynICqcquZweGd/Zn\r\nWLBFqrKFhdyEHKpimmLWdZ4kj8sVgZVQYQntpDk101lDRLFaKRk1F25Ahl0f\r\n0w+edMz6GxZmUW675istfjPcy47VKIhCWqOwwpedvrHawI52jdYXjBE9xT2q\r\nvVwx9oteN6VNgk01eJHmvB2MWmQvVjaxKTArqG55FvQb1/F27XHKjaVHbzOU\r\nQEdae7h5yxCnILWYM0Z3pMJ+Kik4T3tzJo1/lMwKq+FTgQdp4THQmPVux4jH\r\nC0xEEv2eRnz2fNjvtkESA6wAr75Io0z3u08VnCc6utgmTadRxVi3ck6+yWhQ\r\ndH0m2UD3FAQyTNaPLehXl1pzhPhRdnFpDkUrMkC1DxxYL6VNrrrakEV+DUQ9\r\nzT3lxAs3W7Us/y2IXZinIpObCejC1M5jyWsPjyqo7nqyeLZi99/N3z/FM9Ks\r\nKdAjjUXvmeLkTSCzeE/08nDkbuF0/PXO32/kTG+tHV1IQ7j7thPmFXIz4yEo\r\n3dsG5plTbqp/K4mGN9OnfZPTN/2HeEXzNvF+0y4B23SzXV5iPaUP1cPtv9mK\r\n/CKr081/90oSit6d0/ZCPuLa+lNDmjh3dcY=\r\n=KEtY\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-apollo-plugin_0.1.0_1677865119868_0.9076182512513566"},"_hasShrinkwrap":false},"0.1.1":{"name":"@dreamonkey/graphql-codegen-vue-apollo-plugin","version":"0.1.1","description":"graphql-typed-document-node compatible GraphQL Code Generator plugin for Vue Apollo","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/codegen-plugin#readme","repository":{"type":"git","url":"git+https://github.com/dreamonkey/graphql-codegen-stack.git","directory":"packages/codegen-plugin"},"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"}},"main":"./dist/index.cjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","peerDependencies":{"@apollo/client":"^3.6.0","@graphql-codegen/near-operation-file-preset":"^2.4.4","@graphql-codegen/typed-document-node":"^2.3.6 || ^3.0.0 || ^4.0.0","@graphql-codegen/typescript":"^2.8.1 || ^3.0.0","@graphql-codegen/typescript-operations":"^2.5.6 || ^3.0.0","@vue/apollo-composable":"^4.0.0-beta.1","graphql":"^15.0.0 || ^16.0.0","vue":"^3.2.0"},"devDependencies":{"@types/node":"^16.18.12","graphql":"^15.8.0","unbuild":"^1.1.1"},"dependencies":{"@graphql-codegen/plugin-helpers":"^2.7.2"},"scripts":{"build":"unbuild","test":"echo \"TODO: Implement tests\""},"_id":"@dreamonkey/graphql-codegen-vue-apollo-plugin@0.1.1","_integrity":"sha512-poCMcl9AsgzCne6dzpX7acfLsFUHZ0ruxIecnAhW+B/LgW0jxypHODG5FD1O30juUl5HIBLQszkuAr1Sj2yOYw==","_resolved":"/tmp/dbe57f3a1e7720390efaedded0e180e4/dreamonkey-graphql-codegen-vue-apollo-plugin-0.1.1.tgz","_from":"file:dreamonkey-graphql-codegen-vue-apollo-plugin-0.1.1.tgz","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-poCMcl9AsgzCne6dzpX7acfLsFUHZ0ruxIecnAhW+B/LgW0jxypHODG5FD1O30juUl5HIBLQszkuAr1Sj2yOYw==","shasum":"261ab9135faec2fb944cc3ad2fff133bef992cfc","tarball":"https://registry.npmjs.org/@dreamonkey/graphql-codegen-vue-apollo-plugin/-/graphql-codegen-vue-apollo-plugin-0.1.1.tgz","fileCount":7,"unpackedSize":28647,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGrkxtx2o8NrVXHXfFE+NULnkPfOys85u0Oows0SxhmFAiEAqkSH0gLUf+Ouzbr7h8UIJtpy+gLbooAGchShW85eFAM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNW/5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/UQ//e9Oiu1YRHeI1II6JyBQfnxBRT0yiPnn8Ay3sEjduIoW+HpKt\r\ngvznRpofA/nUS2jb+kctZLhkBJDIhUBezscLrFRlHo364V6ZVG2HhAJiT0dw\r\nQ99zeGLHp4KyWZGKzL1lEFHhOuftXw2zh33kg5PLWVpPoc5WDoUFAehcB+8f\r\nSL9jFuNw0YW6FK05Y7XDg/v5KFdRZq31lJ4BALad61N7Bc2ujyneXtjq+ekq\r\nQiGmNfoYpCV8ve/DuhGmcgA6HvHnw6VcIwwQYk7i0muagycoilMgoRP64egn\r\nycA0izGJFogkVNV/Fc4W/uehJKNVcB6lkJ9ZNYkPHHNHok9vOkF5RjICJbxy\r\n+tNEPbdZPZ3zOHNr3W8Ld3ezCgiCL+iCw29VAhS7Fc+JOm74jc/zSMrEJzjc\r\nv4FjQkfmw1dn5LWID59kL2Nbg+pK4IRwetOslN1Jft1x8u5Oe/wCOZuoQtXp\r\nBBsMjZsjM3ypzMNVzjSFNeoLfKXjtfoY1HNoAOXfU5zo1jCxdS9W8gUFC71k\r\nR1BmWpOkIbwrWxzj4PtUoPO8YmA/0cOMz6wDdNbU8VyYniacXJGk2cOnIsMX\r\n/Q+SoZmPkUno+NnYtVPYGR0eG5TVM9Jjovrdkovj9LGD8N9iyYdJW0Hjbcv7\r\nsjvzbd4LTnKTyEDh1njGC7xNqcZdz+EauuU=\r\n=hOpy\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-apollo-plugin_0.1.1_1681223672859_0.9920024021850247"},"_hasShrinkwrap":false},"0.1.2":{"name":"@dreamonkey/graphql-codegen-vue-apollo-plugin","version":"0.1.2","description":"graphql-typed-document-node compatible GraphQL Code Generator plugin for Vue Apollo","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/codegen-plugin#readme","repository":{"type":"git","url":"git+https://github.com/dreamonkey/graphql-codegen-stack.git","directory":"packages/codegen-plugin"},"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"}},"main":"./dist/index.cjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","peerDependencies":{"@apollo/client":"^3.6.0","@graphql-codegen/near-operation-file-preset":"^2.4.4 || ^3.0.0","@graphql-codegen/typed-document-node":"^2.3.6 || ^3.0.0 || ^4.0.0 || ^5.0.0","@graphql-codegen/typescript":"^2.8.1 || ^3.0.0 || ^4.0.0","@graphql-codegen/typescript-operations":"^2.5.6 || ^3.0.0 || ^4.0.0","@vue/apollo-composable":"^4.0.0-beta.1","graphql":"^15.0.0 || ^16.0.0","vue":"^3.2.0"},"devDependencies":{"@types/node":"^16.18.12","graphql":"^15.8.0","unbuild":"^2.0.0"},"dependencies":{"@graphql-codegen/plugin-helpers":"^2.7.2"},"scripts":{"build":"unbuild","test":"echo \"TODO: Implement tests\""},"_id":"@dreamonkey/graphql-codegen-vue-apollo-plugin@0.1.2","_integrity":"sha512-mB2k052ZIPwPjfEGo7eyqx2Z6SOpCUG7PKv4NvbfAmERO4+J2H6PbsqGPRkJoONLSINyrxh2mmd+gPcCR51jiw==","_resolved":"/tmp/4165cf14314f1273938b47e68c6c47c5/dreamonkey-graphql-codegen-vue-apollo-plugin-0.1.2.tgz","_from":"file:dreamonkey-graphql-codegen-vue-apollo-plugin-0.1.2.tgz","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-mB2k052ZIPwPjfEGo7eyqx2Z6SOpCUG7PKv4NvbfAmERO4+J2H6PbsqGPRkJoONLSINyrxh2mmd+gPcCR51jiw==","shasum":"a7102ddfad022f023ec3e6a3de51d6218175b538","tarball":"https://registry.npmjs.org/@dreamonkey/graphql-codegen-vue-apollo-plugin/-/graphql-codegen-vue-apollo-plugin-0.1.2.tgz","fileCount":9,"unpackedSize":28983,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIClp2UY3QuGmWWEPdMEXlu2y4MNDx7sqr+YiGLRPgLsGAiB05j6Yj+7hIUr4Ozb1n2S2v6oPCBt77sZWyDJMZs65UA=="}]},"_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-apollo-plugin_0.1.2_1698231139515_0.33704176275072806"},"_hasShrinkwrap":false}},"time":{"created":"2023-03-03T17:38:39.759Z","0.1.0":"2023-03-03T17:38:40.056Z","modified":"2023-10-25T10:52:19.878Z","0.1.1":"2023-04-11T14:34:33.052Z","0.1.2":"2023-10-25T10:52:19.653Z"},"maintainers":[{"name":"ilcallo","email":"p.caleffi@dreamonkey.com"},{"name":"mrkappa","email":"k.borghi@dreamonkey.com"}],"description":"graphql-typed-document-node compatible GraphQL Code Generator plugin for Vue Apollo","homepage":"https://github.com/dreamonkey/graphql-codegen-stack/tree/main/packages/codegen-plugin#readme","repository":{"type":"git","url":"git+https://github.com/dreamonkey/graphql-codegen-stack.git","directory":"packages/codegen-plugin"},"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-apollo-plugin\n\n[GraphQL Code Generator](https://github.com/dotansimha/graphql-code-generator) plugin for [Vue Apollo](https://github.com/vuejs/apollo) on steroids 🚀\n\n## Installation\n\nMake sure you have installed and configured GraphQL Code Generator and Vue Apollo first:\n\n- [GraphQL Code Generator | Installation](https://the-guild.dev/graphql/codegen/docs/getting-started/installation)\n- [Vue Apollo | Installation](https://v4.apollo.vuejs.org/guide-composable/setup.html)\n\nInstall the package:\n\n```shell\npnpm add -D @dreamonkey/graphql-codegen-vue-apollo-plugin\n```\n\nAdd the plugin to your codegen config:\n\n```ts\n// codegen.ts\nimport type { CodegenConfig } from '@graphql-codegen/cli';\n\nconst config: CodegenConfig = {\n  // ...\n  generates: {\n    'src/generated/graphql.ts': {\n      plugins: [\n        // ...\n\n        // These plugins are required for the plugin to work\n        'typed-document-node',\n        'typescript-operations',\n\n        // Add the plugin here\n        '@dreamonkey/graphql-codegen-vue-apollo-plugin',\n      ],\n    },\n  },\n  // ...\n};\n\nexport default config;\n```\n\n## Usage\n\nDefine the GraphQL document (_`gql` template string, `.graphql` file, etc._):\n\n```graphql\nfragment PostDetails on Post {\n  id\n  title\n  body\n}\n\nquery getPosts {\n  # `posts` name will be used as the name of the data field in the composable result\n  posts {\n    ...PostDetails\n  }\n}\n\n# `createPost` name will be used as the name of the mutation function in the composable result\nmutation createPost($input: PostInput!) {\n  posts {\n    ...PostDetails\n  }\n}\n```\n\nImport and use the generated composables and types:\n\n```ts\nimport {\n  GetPostsDocument,\n  useGetPostsQuery,\n  useCreatePostMutation,\n} from './path/to/generated/graphql';\n\n// `posts` name is coming from the query's main field name, see above\n// `result` contains the classic Apollo result, in case you still need it for some reason\n// You don't have to extract the data you are looking for from the result\n// You don't have to worry about null/undefined handling for non-nullable array fields,\n// it will be an empty array when the data is being fetched\nconst { posts, loading } = useGetPostsQuery();\n//      ^? ComputedRef<PostDetailsFragment[]>\n\n// `createPost` name is coming from the mutation's name, see above\n// `mutate` contains the classic Apollo mutation function, in case you still need it for some reason\nconst { createPost, loading: creatingPost } = useCreatePostMutation();\nasync function create() {\n  // `data` contains the data you are interested in, and not the whole result\n\n  // Error handling is done for you:\n  // - You don't have to check for null/undefined even for non-nullable fields unlike before\n  // - You don't have to check if the errors array exists, if it's non-empty, etc.\n  // - It throws an error if the response contains any kind of errors, so you can simply use try/catch\n\n  // The cache instance is directly available at your disposal\n\n  const { data: newPost, cache } = await createPost({\n    input: { title: 'Title', body: 'Body' },\n  });\n\n  cache.updateQuery(\n    {\n      query: GetPostsDocument,\n    },\n    (data) => {\n      const posts = data?.posts;\n      if (!posts) {\n        return;\n      }\n      return {\n        posts: [...posts, newPost],\n      };\n    },\n  );\n}\n```\n\n## Usage Comparison with `@graphql-codegen/typescript-vue-apollo`\n\n### Queries\n\n`@graphql-codegen/typescript-vue-apollo`:\n\n```ts\nimport { computed } from 'vue';\nimport { useGetPostsQuery } from './path/to/generated/graphql';\n\nconst { result } = useGetPostsQuery();\n//      ^? Ref<{ __typename?: 'Query'; posts: PostDetailsFragment[] } | undefined>\nconst posts = computed(() => result.value?.posts ?? []);\n//      ^? ComputedRef<PostDetailsFragment[]>\n```\n\n`@dreamonkey/graphql-codegen-vue-apollo-plugin`:\n\n```ts\nimport { useGetPostsQuery } from './path/to/generated/graphql';\n\nconst { posts } = useGetPostsQuery();\n//      ^? ComputedRef<PostDetailsFragment[]>\n```\n\n### Mutations\n\n`@graphql-codegen/typescript-vue-apollo`:\n\n```ts\nimport { ApolloError } from '@apollo/client/errors';\nimport { useApolloClient } from '@vue/apollo-composable';\nimport { useCreatePostMutation } from './path/to/generated/graphql';\n\nconst { resolveClient } = useApolloClient();\nconst { mutate: createPost } = useCreatePostMutation({}); // {} is required even if you don't specify extra options\nasync function create() {\n  try {\n    const result = await createPost({\n      input: { title: 'Title', body: 'Body' },\n    });\n\n    const newPost = result?.data?.createPost;\n    if (!newPost || (result.errors && result.errors.length > 0)) {\n      // Handle \"GraphQL\" error(s) through result.errors\n      return;\n    }\n\n    const { cache } = resolveClient();\n    cache.updateQuery(/* ... */);\n  } catch (_error) {\n    const error = _error as ApolloError;\n    // Handle the rest of errors through error.networkError, error.clientErrors, etc.\n    console.error(error);\n  }\n}\n```\n\n`@dreamonkey/graphql-codegen-vue-apollo-plugin`:\n\n```ts\nimport { ApolloError } from '@apollo/client/errors';\nimport { useCreatePostMutation } from './path/to/generated/graphql';\n\nconst { createPost } = useCreatePostMutation();\nasync function create() {\n  try {\n    const { data: newPost, cache } = await createPost({\n      input: { title: 'Title', body: 'Body' },\n    });\n\n    cache.updateQuery(/* ... */);\n  } catch (_error) {\n    const error = _error as ApolloError;\n    // Handle all kinds of Apollo related errors through error.networkError, error.clientErrors, error.graphQLErrors, etc.\n    console.error(error);\n  }\n}\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"}