npmpackage.info

Gathering detailed insights and metrics for vue-apollo-smart-ops

vue-apollo-smart-ops

Library for creating TypeScript-typed operation functions for GraphQL queries and mutations compatible with Vue Apollo.

0.2.0-beta.1

TypeScript

Installations

npm install vue-apollo-smart-ops

Pull Requests

Open

9

Total

289

Closed

5

Merged

275

Issues

Open

2

Total

4

Closed

2

Releases

v0.2.0-beta.1

Published on 28 Oct 2021

v0.1.0

Published on 07 Sept 2021

v0.1.0-alpha.5

Published on 07 Sept 2021

v0.1.0-alpha.4

Published on 06 Sept 2021

v0.1.0-alpha.3

Published on 06 Sept 2021

v0.1.0-alpha.2

Published on 05 Sept 2021

View all 10 releases

Developer

madscience

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

>=12.9.0

Typescript Support

Yes

Node Version

12.22.7

NPM Version

6.14.15 Statistics

5 Stars

588 Commits

5 Forks

3 Watching

11 Branches

3 Contributors

Updated on 16 Jul 2024

Languages

TypeScript (90.18%)

JavaScript (9.82%)

Total Downloads

Cumulative downloads

Total Downloads

140,806

Last day

981.8%

119

Compared to previous day

Last week

61.3%

592

Compared to previous week

Last month

-31.8%

2,106

Compared to previous month

Last year

-11.7%

34,709

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

vue-apollo-smart-ops

Creates TypeScript-typed operation functions for GraphQL queries and mutations compatible with Vue Apollo.

This library is intended to be used together with the typescript-vue-apollo-smart-ops plugin for GraphQL Code Generator, but it may also be useful standalone.

Installation

1npm install --save vue-apollo-smart-ops

Smart Query Usage

`createSmartQueryOptionsFunction(query, onError?)`

Returns a generated function which returns a Vue Apollo Smart Query options object for the given query when called.

⚠️ Note: The returned function is not meant to execute the query itself. It is only used to configure a Vue Apollo Smart Query. The responsibility for executing the query lies with Vue Apollo.

The returned function accepts an options object as its first argument, allowing variables and other parameters to be customised in runtime usage. Compared with creating an options object directly, the advantage here is that the options accepted by the generated function are fully type-checked based on the query definition - and without needing to pass type arguments at every usage.

Using the @graphql-codegen/typescript-vue-apollo-smart-ops plugin you can automatically generate options functions for all the query operations in your project.

The following example manually creates an options function and assigns it to the variable useTodoListQuery:

1const useTodoListQuery = createSmartQueryOptionsFunction<TodosQuery, TodosQueryVariables>(gql`
2  query Todos($skip: Int, $limit: Int) {
3    todos(skip: $skip, limit: $limit) {
4      id
5      title
6    }
7  }
8`);

This function can subsequently be called inside the apollo options of a Vue component to configure a Smart Query. The following example adds a todos Smart Query to a component, in Vue class component style:

1@Component<TodoList>({
2  apollo: {
3    todos: useTodoListQuery<TodoList>({
4      skip() {
5        return this.foo === 'bar';
6      },
7      variables() {
8        return {
9          limit: 10,
10          skip: 0,
11        };
12      },
13    }),
14  },
15})
16class TodoList extends Vue {
17  todos: Todo[] | null = null;
18
19  get foo(): string {
20    return 'bar';
21  }
22}

`@SmartQuery(options)`

The @SmartQuery() decorator works with your generated options functions to enable the declaration of Smart Queries within the body of a Vue class component, instead of in the component options. This helps to keep the data property and its query options together in one place.

The following example is equivalent to the previous example but using the decorated syntax style:

1@Component
2class TodoList extends Vue {
3  @SmartQuery(
4    useTodoListQuery<TodoList>({
5      skip() {
6        return this.foo === 'bar';
7      },
8      variables() {
9        return this.vars;
10      },
11    }),
12  )
13  todos: Todo[] | null = null;
14
15  get foo(): string {
16    return 'bar';
17  }
18}

Mutations Usage

`createMutationFunction(mutation, onError?)`

Returns a generated function which executes a mutation and returns the result when called.

The returned function requires a Vue app instance as its first argument (from which the $apollo client will be accessed), and accepts an options object as its second argument, allowing variables and other parameters to be customised in runtime usage. Compared with executing a mutation using the Vue Apollo client directly, the advantage here is that the options accepted by the generated function are fully type-checked based on the operation definition - and without needing to pass type arguments at every usage.

Using the @graphql-codegen/typescript-vue-apollo-smart-ops plugin you can automatically generate mutation functions for all the mutation operations in your project.

The following example manually creates a mutation function and assigns it to the variable todoCreateMutation:

1const todoCreateMutation = createMutationFunction<TodoCreateMutation, TodoCreateMutationVariables>(gql`
2  mutation TodoCreate($input: TodoInput!) {
3    todoCreate(input: $input) {
4      todo {
5        id
6        title
7      }
8    }
9  }
10`);

The following example demonstrates how to call this mutation from a method on a component:

1@Component
2class TodoList extends Vue {
3  async onClickCreateTodoButton(): Promise<void> {
4    const result = await todoCreateMutation(this, {
5      variables: {
6        title: 'Bake a cake',
7      },
8    });
9
10    if (!result.success) {
11      throw new Error(`Failed to create Todo!`);
12    }
13  }
14}

Credits

@SmartQuery() decorator is based on the vue-apollo-decorator package by chanlito, with some alteration to the types.

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 3

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:124: update your workflow using https://app.stepsecurity.io/secureworkflow/equalogic/vue-apollo-smart-ops/build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:126: update your workflow using https://app.stepsecurity.io/secureworkflow/equalogic/vue-apollo-smart-ops/build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:132: update your workflow using https://app.stepsecurity.io/secureworkflow/equalogic/vue-apollo-smart-ops/build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/equalogic/vue-apollo-smart-ops/build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/equalogic/vue-apollo-smart-ops/build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/equalogic/vue-apollo-smart-ops/build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/equalogic/vue-apollo-smart-ops/build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/equalogic/vue-apollo-smart-ops/build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:56: update your workflow using https://app.stepsecurity.io/secureworkflow/equalogic/vue-apollo-smart-ops/build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:62: update your workflow using https://app.stepsecurity.io/secureworkflow/equalogic/vue-apollo-smart-ops/build.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/build.yml:69: update your workflow using https://app.stepsecurity.io/secureworkflow/equalogic/vue-apollo-smart-ops/build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:88: update your workflow using https://app.stepsecurity.io/secureworkflow/equalogic/vue-apollo-smart-ops/build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:90: update your workflow using https://app.stepsecurity.io/secureworkflow/equalogic/vue-apollo-smart-ops/build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:96: update your workflow using https://app.stepsecurity.io/secureworkflow/equalogic/vue-apollo-smart-ops/build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/equalogic/vue-apollo-smart-ops/publish.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/equalogic/vue-apollo-smart-ops/publish.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/equalogic/vue-apollo-smart-ops/publish.yml/master?enable=pin
Info: 0 out of 16 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 1 third-party GitHubAction dependencies pinned
Info: 2 out of 2 npmCommand dependencies pinned

1

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

License

Determines if the project has defined a license.

0

SAST

Determines if the project uses static code analysis.

Score

2.7

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

vue-apollo-smart-ops

Installations

Pull Requests

9

289

5

275

Issues

2

4

2

Releases

Developer

madscience

Developer Guide

CommonJS

>=12.9.0

Yes

12.22.7

6.14.15

Statistics

Languages

Total Downloads

140,806

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Optional Dependencies

vue-apollo-smart-ops

Installation

Smart Query Usage

createSmartQueryOptionsFunction(query, onError?)

@SmartQuery(options)

Mutations Usage

createMutationFunction(mutation, onError?)

Credits

10

10

3

1

0

0

0

0

0

0

0

0

2.7

/10

`createSmartQueryOptionsFunction(query, onError?)`

`@SmartQuery(options)`

`createMutationFunction(mutation, onError?)`