Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/becem-gharbi/nuxt-apollo
Apollo client for Nuxt 3
https://github.com/becem-gharbi/nuxt-apollo
Last synced: 3 months ago
JSON representation
Apollo client for Nuxt 3
- Host: GitHub
- URL: https://github.com/becem-gharbi/nuxt-apollo
- Owner: becem-gharbi
- License: mit
- Created: 2023-07-29T18:48:34.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-17T16:00:25.000Z (7 months ago)
- Last Synced: 2024-09-19T10:08:53.420Z (4 months ago)
- Language: TypeScript
- Homepage:
- Size: 707 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Nuxt Apollo
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
Apollo Client for Nuxt 3.
## Features
- ✔️ Based on the latest [Vue Apollo](https://v4.apollo.vuejs.org/) plugin
- ✔️ SSR support
- ✔️ Graphql subscription via Websockets
- ✔️ Authorization via built-in hooks
- ✔️ Conditional import of Websockets dependencies
## Quick Setup
1. Add `nuxt-apollo` dependency to your project
```bash
# Using pnpm
pnpm add -D nuxt-apollo
# Using yarn
yarn add --dev nuxt-apollo
# Using npm
npm install --save-dev nuxt-apollo
```
2. Add `nuxt-apollo` to the `modules` section of `nuxt.config.ts`
```js
export default defineNuxtConfig({
modules: ["nuxt-apollo"],
apollo: {
httpEndpoint: "", // Required
wsEndpoint: "", // Optional
credentials: "same-origin",
proxyCookies: true,
},
});
```
That's it! You can now use Nuxt Apollo in your Nuxt app ✨
## Usage
### APIs
All [Vue Apollo](https://v4.apollo.vuejs.org/) composables are auto-imported. Please refer to [docs](https://v4.apollo.vuejs.org/api/use-query.html) for usage.
### Authentication
_HTTP_
Two options exists either via `Authorization` header which can be set via `apollo:http-auth` hook or via a cookie which can be configured via `credentials` option for client-side and `proxyCookies` for server-side [[docs]](https://www.apollographql.com/docs/react/networking/authentication).
```js
export default defineNuxtPlugin({
hooks: {
"apollo:http-auth": (args) => {
args.authorization = "Bearer access_token";
},
},
});
```
_Websockets_
The authentication for `useSubscription` can be handled via `apollo:ws-auth` hook. The current supported method is connectionParams [[docs]](https://www.apollographql.com/docs/react/data/subscriptions/#5-authenticate-over-websocket-optional).
```js
export default defineNuxtPlugin({
hooks: {
"apollo:ws-auth": (args) => {
args.params = {};
},
},
});
```
### GQL auto-completion
In order to benefit autocomplete suggestion when writing graphql queries, you can install [GraphQL: Language Feature Support](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql) vscode extension.
Then create `graphql.config.js` at root and paste the config object below.
```js
module.exports = {
projects: {
app: {
schema: [HTTP_ENDPOINT],
documents: [
"./pages/**/*.vue",
"./components/**/*.vue",
"./composables/**/*.ts",
"./app.vue",
],
},
},
};
```
### Codegen
In order to benefit automatically typed Queries, Mutations and, Subscriptions, you can install [Graphql Code Generator](https://the-guild.dev/graphql/codegen/docs/guides/react-vue).
```bash
npm i -D @graphql-codegen/cli @graphql-codegen/client-preset @parcel/watcher
```
Then create `codegen.ts` at root and paste the config object below.
```js
const config = {
schema: HTTP_ENDPOINT,
documents: [
"./pages/**/*.vue",
"./components/**/*.vue",
"./composables/**/*.ts",
"./app.vue",
],
ignoreNoDocuments: true,
generates: {
"./gql/": {
preset: "client",
config: {
useTypeImports: true,
},
},
},
};
export default config;
```
Finally start GraphQL Code Generator in watch mode, this will type your GraphQL queries as you write them.
```bash
npx graphql-codegen --watch
```
## Development
```bash
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release
```
[npm-version-src]: https://img.shields.io/npm/v/nuxt-apollo/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/nuxt-apollo
[npm-downloads-src]: https://img.shields.io/npm/dt/nuxt-apollo.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/nuxt-apollo
[license-src]: https://img.shields.io/npm/l/nuxt-apollo.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/nuxt-apollo
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com