https://github.com/dulnan/nuxt-graphql-middleware
GraphQL in the backend, fetch in the frontend. With TypeScript support.
https://github.com/dulnan/nuxt-graphql-middleware
graphql nuxt-module nuxtjs typescript
Last synced: 7 months ago
JSON representation
GraphQL in the backend, fetch in the frontend. With TypeScript support.
- Host: GitHub
- URL: https://github.com/dulnan/nuxt-graphql-middleware
- Owner: dulnan
- License: mit
- Created: 2021-02-02T06:33:33.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-03-28T12:35:08.000Z (7 months ago)
- Last Synced: 2025-04-01T16:02:44.015Z (7 months ago)
- Topics: graphql, nuxt-module, nuxtjs, typescript
- Language: TypeScript
- Homepage: https://nuxt-graphql-middleware.dulnan.net
- Size: 6.24 MB
- Stars: 62
- Watchers: 5
- Forks: 10
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Nuxt GraphQL Middleware
Keep your GraphQL server private: Expose GraphQL queries and mutations as fully
typed API routes.
**[Documentation](https://nuxt-graphql-middleware.dulnan.net)** –
**[npm](https://www.npmjs.com/package/nuxt-graphql-middleware)** –
**[Version 2.x (for Nuxt 2)](https://github.com/dulnan/nuxt-graphql-middleware/tree/2.x)**
[](https://github.com/dulnan/nuxt-graphql-middleware/actions/workflows/node.js.yml)
## Features
- Exposes each query and mutation as an API route
- GraphQL requests are only done on the server side
- No GraphQL documents in client bundle
- Includes composables to perform queries or mutations
- Modify request headers, responses and handle errors
- HMR for all GraphQL files
- Integration with [Nuxt DevTools](https://devtools.nuxtjs.org)
- Full TypeScript integration for schema, queries, mutations and fragments using
[graphql-code-generator](https://github.com/dotansimha/graphql-code-generator)
# Setup
## Install
```bash
npx nuxi@latest module add nuxt-graphql-middleware
```
Minimal configuration needed:
```javascript
export default defineNuxtConfig({
modules: ['nuxt-graphql-middleware'],
graphqlMiddleware: {
graphqlEndpoint: 'https://example.com/graphql',
},
})
```
## Usage
Write your first query, e.g. in pages/films.query.graphql:
```graphql
query films {
allFilms {
films {
id
}
}
}
```
Your query is now available via the useGraphqlQuery() composable:
```typescript
const { data } = await useGraphqlQuery('films')
console.log(data.allFilms.films)
```
Or using the convenience wrapper for useAsyncData:
```typescript
const { data } = await useAsyncGraphqlQuery('films')
console.log(data.value.allFilms.films)
```
Alternatively you can also call
`http://localhost:3000/api/graphql_middleware/query/films` to get the same
result.
## Nuxt 2
The 3.x releases are only compatible with Nuxt 3. The
[2.x branch](https://github.com/dulnan/nuxt-graphql-middleware/tree/2.x) and
releases on npm are compatible with Nuxt 2.