sponsor us

alt text

Vue 3 Apollo

Version Downloads License Github Stars Discord

Description

Graphql Vue 3 Apollo

  • Vue 3 Support
  • Only ESM Support
  • Apollo Client 3 Support

Installation

pnpm add @huntersofbook/vue-apollo

Demo

Vue 3 with Vite Demo

Edit @huntersofbook/vue-apollo

Code for the demo is in playground folder.

Nuxt 3 Demo

Edit @huntersofbook/vue-apollo

Code for the demo is in playground-nuxt folder.

Usage

import { DefaultApolloClient } from '@huntersofbook/vue-apollo'import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client/core'// HTTP connection to the APIconst httpLink = createHttpLink({  // You should use an absolute URL here  uri: 'https://countries.trevorblades.com',})// Cache implementationconst cache = new InMemoryCache()// Create the apollo clientconst apolloClient = new ApolloClient({  link: httpLink,  cache,})provide(DefaultApolloClient, apolloClient)

Codegen

pnpm add -D @graphql-codegen/add @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/named-operations-object @graphql-codegen/typescript-apollo-client-helpers @graphql-codegen/typescript-operations @graphql-codegen/typescript-vue-apollo

codegen.yml

overwrite: true

documents: ./src/graphql/**/*.graphql

schema: ./schema.graphql
emitLegacyCommonJSImports: false

generates:
  ./src/graphql/types.ts:
    plugins:
      - add: {content: '// THIS FILE IS GENERATED, DO NOT EDIT!'}
      - add: {content: '/* eslint-disable eslint-comments/no-unlimited-disable */'}
      - add: {content: '/* tslint:disable */'}
      - add: {content: '/* eslint-disable */'}
      - add: {content: // @ts-nocheck}
      - typescript
      - typescript-operations
      - typescript-apollo-client-helpers
      - typescript-vue-apollo
      - named-operations-object
    config:
      enumsAsTypes: true
      withCompositionFunctions: true
      vueApolloComposableImportFrom: '@huntersofbook/vue-apollo'
      vueCompositionApiImportFrom: vue
pnpm graphql-codegen-esm --config codegen.yml

💻 Development

  • Clone this repository
  • Enable Corepack using corepack enable (use npm i -g corepack for Node.js < 16.10)
  • Install dependencies using pnpm install
  • Stub module with pnpm dev:prepare
  • Run pnpm dev to start playground in development mode

Inspiration

Codes in this build are inspired by Vue and from there the codes were copied. Thanks you for your great work. Thank you Akryum

License

MIT License © 2023-PRESENT productdevbook

Edit this page on GitHub
Table of Contents