https://github.com/newbeea/nuxt3-apollo-module
https://github.com/newbeea/nuxt3-apollo-module
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/newbeea/nuxt3-apollo-module
- Owner: newbeea
- Created: 2021-12-24T11:33:36.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-09-29T11:36:23.000Z (about 3 years ago)
- Last Synced: 2025-03-24T01:35:34.486Z (9 months ago)
- Language: TypeScript
- Size: 56.6 KB
- Stars: 33
- Watchers: 4
- Forks: 8
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @nuxt3/apollo-module
Apollo module for nuxt3
## Demo
[nuxt3-apollo-starter](https://github.com/newbeea/nuxt3-apollo-starter)
## Installation
```bash
npm i -D @nuxt3/apollo-module
```
## Configuration
```js
// nuxt.config.js
import '@nuxt3/apollo-module' // import to remove config warning, not necessary
export default {
buildModules: [
'@nuxt3/apollo-module'
],
apollo: {
clientConfigs: {
default: {
// see https://www.apollographql.com/docs/react/api/core/ApolloClient/#ApolloClient.constructor
},
client1: {
// another client
},
client2: {
// authentication type
authenticationType: 'Bearer', // default 'Bearer'
}
},
// Cookie parameters used to store authentication token
cookieAttributes: {
/**
* Define when the cookie will be removed. Value can be a Number
* which will be interpreted as days from time of creation or a
* Date instance. If omitted, the cookie becomes a session cookie.
*/
expires: 7,
/**
* Define the path where the cookie is available. Defaults to '/'
*/
path: '/',
/**
* Define the domain where the cookie is available. Defaults to
* the domain of the page where the cookie was created.
*/
domain: 'example.com',
/**
* A Boolean indicating if the cookie transmission requires a
* secure protocol (https). Defaults to false.
*/
secure: false,
},
}
}
```
## Usage
Query code(You can use[@nuxt3/graphql-codegen-module](https://github.com/newbeea/nuxt3-graphql-codegen-module) to generate code)
```
import gql from 'graphql-tag'
import * as VueApolloComposable from '@vue/apollo-composable'
export const HelloDocument = gql`
query Hello {
world
}
`
export function useHelloQuery() {
return VueApolloComposable.useQuery(HelloDocument, {}, {
// prefetch: false, // prefetch: false will fetch on client
})
}
```
Fetch in setup
```
import { useHelloQuery } from '@/api'
// default client
const { result, loading } = await useHelloQuery()
// result: { "world": "Hello world!" }
// use client by id
const { result, loading } = await useHelloQuery({
clientId: 'client1'
})
// result: { "world": "Hello world!" }
// client only
const { result, loading } = await useHelloQuery({
prefetch: false
})
// result: { "world": "Hello world!" } (check 'result && result.world' in template is necessary)
```
Authentication
You have following methods for authentication available:
```js
// set your graphql-token
$apolloHelpers.onLogin(token /* if not default you can pass in clientId as second argument, you can set custom cookies attributes object as the third argument, and you can skip reset store as the fourth argument */)
// unset your graphql-token
$apolloHelpers.onLogout(/* if not default you can pass in clientId as first argument, and you can skip reset store as the second argument */)
// get your current token (we persist token in a cookie)
$apolloHelpers.getToken(/* you can provide clientId */)
```
User login
```js
import { useLoginMutation } from '@/generated/operations' // generated by @nuxt3/graphql-codegen-module
const { mutate: login, onDone } = useLoginMutation({
})
const { $apolloHelpers } = useNuxtApp()
onDone((res) => {
const token = res.data.login.token // based on your resolver
$apolloHelpers.onLogin(token)
})
```
User logout
```js
// ~/components/my-component.js
const { $apolloHelpers } = useNuxtApp()
const logout = () => {
$apolloHelpers.onLogout()
}
```
## Dev
```
pnpm i
```
```
pnpm run build
```
## License
MIT License © 2021-PRESENT [Phil xu](https://github.com/newbeea)