{"id":22325754,"url":"https://github.com/equalogic/vue-apollo-smart-ops","last_synced_at":"2025-07-29T16:33:28.066Z","repository":{"id":36981628,"uuid":"356675359","full_name":"equalogic/vue-apollo-smart-ops","owner":"equalogic","description":"Library for creating TypeScript-typed operation functions for GraphQL queries and mutations compatible with Vue Apollo.","archived":false,"fork":false,"pushed_at":"2024-11-30T01:10:32.000Z","size":1764,"stargazers_count":5,"open_issues_count":11,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-30T02:19:45.443Z","etag":null,"topics":["apollo","apollo-client","apollographql","graphql","typescript","vue","vue-apollo"],"latest_commit_sha":null,"homepage":"","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/equalogic.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":"2021-04-10T19:28:36.000Z","updated_at":"2024-07-16T15:38:08.000Z","dependencies_parsed_at":"2023-09-22T04:05:24.311Z","dependency_job_id":"63765333-5b33-437d-bc9a-8c39780bda25","html_url":"https://github.com/equalogic/vue-apollo-smart-ops","commit_stats":null,"previous_names":["madscience/vue-apollo-smart-ops"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/equalogic%2Fvue-apollo-smart-ops","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/equalogic%2Fvue-apollo-smart-ops/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/equalogic%2Fvue-apollo-smart-ops/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/equalogic%2Fvue-apollo-smart-ops/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/equalogic","download_url":"https://codeload.github.com/equalogic/vue-apollo-smart-ops/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228030027,"owners_count":17858432,"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":["apollo","apollo-client","apollographql","graphql","typescript","vue","vue-apollo"],"created_at":"2024-12-04T02:13:34.618Z","updated_at":"2024-12-04T02:13:35.298Z","avatar_url":"https://github.com/equalogic.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-apollo-smart-ops\n\nCreates TypeScript-typed operation functions for GraphQL queries and mutations compatible with\n[Vue Apollo](https://apollo.vuejs.org/).\n\nThis library is intended to be used together with the\n[`typescript-vue-apollo-smart-ops` plugin](https://www.graphql-code-generator.com/docs/plugins/typescript-vue-apollo-smart-ops)\nfor [GraphQL Code Generator](https://www.graphql-code-generator.com/), but it may also be useful standalone.\n\n## Installation\n\n```shell\nnpm install --save vue-apollo-smart-ops\n```\n\n## Smart Query Usage\n\n### `createSmartQueryOptionsFunction(query, onError?)`\n\nReturns a generated function which returns a [Vue Apollo Smart Query options object](https://apollo.vuejs.org/api/smart-query.html#options)\nfor the given query when called.\n\n\u003e ⚠️ Note: The returned function is not meant to execute the query itself. It is only used to configure a Vue Apollo\n\u003e Smart Query. The responsibility for executing the query lies with Vue Apollo.\n\nThe returned function accepts an options object as its first argument, allowing variables and other parameters to be\ncustomised in runtime usage. Compared with creating an options object directly, the advantage here is that the options\naccepted by the generated function are fully type-checked based on the query definition - and without needing to pass\ntype arguments at every usage.\n\nUsing the [`@graphql-codegen/typescript-vue-apollo-smart-ops` plugin](https://www.graphql-code-generator.com/docs/plugins/typescript-vue-apollo-smart-ops)\nyou can automatically generate options functions for all the query operations in your project.\n\nThe following example manually creates an options function and assigns it to the variable `useTodoListQuery`:\n\n```typescript\nconst useTodoListQuery = createSmartQueryOptionsFunction\u003cTodosQuery, TodosQueryVariables\u003e(gql`\n  query Todos($skip: Int, $limit: Int) {\n    todos(skip: $skip, limit: $limit) {\n      id\n      title\n    }\n  }\n`);\n```\n\nThis function can subsequently be called inside the `apollo` options of a Vue component to configure a Smart Query. The\nfollowing example adds a `todos` Smart Query to a component, in Vue class component style:\n\n```typescript\n@Component\u003cTodoList\u003e({\n  apollo: {\n    todos: useTodoListQuery\u003cTodoList\u003e({\n      skip() {\n        return this.foo === 'bar';\n      },\n      variables() {\n        return {\n          limit: 10,\n          skip: 0,\n        };\n      },\n    }),\n  },\n})\nclass TodoList extends Vue {\n  todos: Todo[] | null = null;\n\n  get foo(): string {\n    return 'bar';\n  }\n}\n```\n\n### `@SmartQuery(options)`\n\nThe `@SmartQuery()` decorator works with your generated options functions to enable the declaration of Smart Queries\nwithin the body of a Vue class component, instead of in the component options. This helps to keep the data property and\nits query options together in one place.\n\nThe following example is equivalent to the previous example but using the decorated syntax style:\n\n```typescript\n@Component\nclass TodoList extends Vue {\n  @SmartQuery(\n    useTodoListQuery\u003cTodoList\u003e({\n      skip() {\n        return this.foo === 'bar';\n      },\n      variables() {\n        return this.vars;\n      },\n    }),\n  )\n  todos: Todo[] | null = null;\n\n  get foo(): string {\n    return 'bar';\n  }\n}\n```\n\n## Mutations Usage\n\n### `createMutationFunction(mutation, onError?)`\n\nReturns a generated function which executes a mutation and returns the result when called.\n\nThe returned function requires a Vue app instance as its first argument (from which the `$apollo` client will be\naccessed), and accepts an options object as its second argument, allowing variables and other parameters to be\ncustomised in runtime usage. Compared with executing a mutation using the Vue Apollo client directly, the advantage here\nis that the options accepted by the generated function are fully type-checked based on the operation definition - and\nwithout needing to pass type arguments at every usage.\n\nUsing the [`@graphql-codegen/typescript-vue-apollo-smart-ops` plugin](https://www.graphql-code-generator.com/docs/plugins/typescript-vue-apollo-smart-ops)\nyou can automatically generate mutation functions for all the mutation operations in your project.\n\nThe following example manually creates a mutation function and assigns it to the variable `todoCreateMutation`:\n\n```typescript\nconst todoCreateMutation = createMutationFunction\u003cTodoCreateMutation, TodoCreateMutationVariables\u003e(gql`\n  mutation TodoCreate($input: TodoInput!) {\n    todoCreate(input: $input) {\n      todo {\n        id\n        title\n      }\n    }\n  }\n`);\n```\n\nThe following example demonstrates how to call this mutation from a method on a component:\n\n```typescript\n@Component\nclass TodoList extends Vue {\n  async onClickCreateTodoButton(): Promise\u003cvoid\u003e {\n    const result = await todoCreateMutation(this, {\n      variables: {\n        title: 'Bake a cake',\n      },\n    });\n\n    if (!result.success) {\n      throw new Error(`Failed to create Todo!`);\n    }\n  }\n}\n```\n\n## Credits\n\n- `@SmartQuery()` decorator is based on the [vue-apollo-decorator](https://github.com/chanlito/vue-apollo-decorator)\n  package by chanlito, with some alteration to the types.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fequalogic%2Fvue-apollo-smart-ops","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fequalogic%2Fvue-apollo-smart-ops","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fequalogic%2Fvue-apollo-smart-ops/lists"}