1.1.6 • Published 8 months ago

nuxt-apollo-client v1.1.6

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

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

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 will be 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:
export default defineNuxtConfig({
  modules: ['nuxt-apollo-client'],
  apollo: {
    endPoints: {
      default: 'http://localhost:4000/graphql',  
      // Don't change the 'default' key as it is used for the default client
      // 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.
// 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:

<script setup>
const { result, loading, error, refetch } = await useMeQuery()
</script>

<template>
  <div>Welcome, {{ result?.me?.name }}!</div>
</template>

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:

const { result, loading, error, refetch } = useMeQuery();

Mutations

<script setup lang="ts">
const { mutate, loading, error, onDone, onError } = useDeletePostMutation()

const handleDelete = async (id: string) => {
  await mutate({ id })
  // Handle successful deletion
}
</script>

Configuration Options

Customize it in your nuxt.config.ts file:

OptionTypeDescriptionDefault
endPointsRecord<string, string>GraphQL endpoint URLs{ default: 'http://localhost:4000/graphql' }
prefixstringPrefix for generated types'I'
tokenKeystringKey for storing the authentication token'token'
pluginsstring[]Additional plugins for codegen[]
pluginConfigobjectAdditional configuration for codegen plugins{}
gqlDirstringDirectory for GraphQL files'graphql'
runOnBuildbooleanRun codegen on buildfalse
enableWatcherbooleanEnable file watcher for codegentrue
setContextfunctionSet context for codegen({operationName, variables, token}) => any
memoryConfigInMemoryCacheConfigMemory cache config for Apollo Client{}
useGETForQueriesbooleanUse GET for queriesfalse
apolloClientConfigApolloClientOptions<any>Apollo Client confignull
apolloUploadConfigApolloUploadClientOptionsApollo Upload Client config`{}
refetchOnUpdatebooleanSmartly Refetch queries on component, page, or route changes, ideal for dynamic data-driven apps.false

Functions

FunctionDescriptionSyntax
setTokenSets the token in the cookiesetToken({ key(optional), token, options })
getTokenGets the token from the cookiegetToken(key(optional))
removeTokenRemoves the token from the cookieremoveToken(key(optional), options)
loadApolloClientsInitializes Apollo Clients for use outside componentsloadApolloClients()

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.