Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/safdar-azeem/nuxt-apollo-client
Nuxt module for Apollo Client with SSR and codegen support.
https://github.com/safdar-azeem/nuxt-apollo-client
nuxt nuxt-apollo nuxt-codegen nuxt-graphql nuxt-graqphql nuxt-module nuxt-ssr
Last synced: 3 months ago
JSON representation
Nuxt module for Apollo Client with SSR and codegen support.
- Host: GitHub
- URL: https://github.com/safdar-azeem/nuxt-apollo-client
- Owner: safdar-azeem
- Created: 2024-07-17T17:29:44.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2024-08-22T10:56:05.000Z (5 months ago)
- Last Synced: 2024-09-18T17:15:13.074Z (4 months ago)
- Topics: nuxt, nuxt-apollo, nuxt-codegen, nuxt-graphql, nuxt-graqphql, nuxt-module, nuxt-ssr
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/nuxt-apollo-client
- Size: 1.13 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Nuxt Apollo Client Module
A Nuxt module for integrating Apollo Client with SSR and codegen support.
## Features
- Apollo Client integration with Nuxt 3
- Server-Side Rendering (SSR) support
- GraphQL Code Generator integration
- Multiple client support
- File Upload support
- Automatic token management
- Automatic type generation for queries and mutations
- Auto-imports for generated composables and types
- Production-ready 📦
## Installation
```bash
npm install nuxt-apollo-client
# or
yarn add nuxt-apollo-client
```
### Everything is set up for you: 🚀
- No need to install Apollo Client or GraphQL codegen packages
- All necessary dependencies are automatically handled
- Apollo Client configuration is done for you
## Minimal Configuration
##### 1. Add `nuxt-apollo-client` to the `modules` section of your `nuxt.config.ts`:
```typescript
export default defineNuxtConfig({
modules: ['nuxt-apollo-client'],
apollo: {
endPoints: {
default: 'http://localhost:4000/graphql',
// Add more endpoints as needed
},
// Optional configurations
prefix: 'I',
tokenKey: 'token',
gqlDir: 'graphql',
},
})
```
##### 2. Create a `graphql` directory in your project root and add your GraphQL queries and mutations as `.ts` files.
```bash
// graphql/meQuery.ts
import gql from 'graphql-tag';
export const meQuery = gql`
query me {
me {
id
name
}
}
`;
// graphql/deletePostMutation.ts
import gql from 'graphql-tag';
export const deletePostMutation = gql`
mutation deletePost($id: ID!) {
deletePost(id: $id) {
id
}
}
```
## Usage
Use auto-generated composables in your Vue component via auto-imports or import them using the #graphql alias.
### Server-side Query (SSR)
Want to fetch data on the server? Just use the await keyword with your query:
```vue
const { result, loading, error, refetch } = await useMeQuery()
Welcome, {{ result?.me?.name }}!
```
This way, your data is ready when the page loads. Great for SEO and initial page load performance!
### Client-side Query
For queries that don't need server-side rendering, simply remove the await:
```vue
const { result, loading, error, refetch } = useMeQuery();
```
### Mutations
```vue
const { mutate, loading, error, onDone, onError } = useDeletePostMutation()
const handleDelete = async (id: string) => {
await mutate({ id })
// Handle successful deletion
}
```
## Configuration Options
| Option | Type | Description | Default |
| ------------------ | --------------------------- | -------------------------------------------- | ---------------------------------------------- |
| endPoints | `Record` | GraphQL endpoint URLs | `{ default: 'http://localhost:4000/graphql' }` |
| prefix | `string` | Prefix for generated types | `'I'` |
| tokenKey | `string` | Key for storing the authentication token | `'token'` |
| plugins | `string[]` | Additional plugins for codegen | `[]` |
| pluginConfig | `object` | Additional configuration for codegen plugins | `{}` |
| gqlDir | `string` | Directory for GraphQL files | `'graphql'` |
| runOnBuild | `boolean` | Run codegen on build | `false` |
| enableWatcher | `boolean` | Enable file watcher for codegen | `true` |
| setContext | `function` | Set context for codegen | `({operationName, variables, token}) => any` |
| memoryConfig | `InMemoryCacheConfig` | Memory cache config for Apollo Client | `{}` |
| useGETForQueries | `boolean` | Use GET for queries | `false` |
| apolloClientConfig | `ApolloClientOptions` | Apollo Client config | `null` |
| apolloUploadConfig | `ApolloUploadClientOptions` | Apollo Upload Client config | `{}` |
## Functions
| Function | Description | Syntax |
| ----------------- | ----------------------------------------------------- | --------------------------------------------- |
| setToken | Sets the token in the cookie | `setToken({ key(optional), token, options })` |
| getToken | Gets the token from the cookie | `getToken(key(optional))` |
| removeToken | Removes the token from the cookie | `removeToken(key(optional), options)` |
| loadApolloClients | Initializes Apollo Clients for use outside components | `loadApolloClients()` |
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is licensed under the MIT License.