@huntersofbook/vue-apollo

Vue 3 Apollo

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

Code for the demo is in playground folder.

Nuxt 3 Demo

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 API
const httpLink = createHttpLink({
  // You should use an absolute URL here
  uri: 'https://countries.trevorblades.com',
})

// Cache implementation
const cache = new InMemoryCache()

// Create the apollo client
const 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 Thank you SSR code fabis94 and PR

License

MIT License © 2023-PRESENT productdevbook