[{"_path":"/getting-started/configuration","_draft":false,"_partial":false,"_empty":false,"title":"Configuration","description":"Configure Nuxt Apollo via the `apollo` property.","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"defaults"},"children":[{"type":"text","value":"Defaults"}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n modules: ['@nuxtjs/apollo'],\n\n apollo: {\n autoImports: true,\n authType: 'Bearer',\n authHeader: 'Authorization',\n tokenStorage: 'cookie',\n proxyCookies: true,\n clients: {}\n }\n})\n","filename":"nuxt.config.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default defineNuxtConfig({\n modules: ['@nuxtjs/apollo'],\n\n apollo: {\n autoImports: true,\n authType: 'Bearer',\n authHeader: 'Authorization',\n tokenStorage: 'cookie',\n proxyCookies: true,\n clients: {}\n }\n})\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"autoimports"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"autoImports"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"true"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Determine if vue-apollo composables should be automatically imported and accessible within your nuxt app."}]},{"type":"element","tag":"h2","props":{"id":"authtype"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"authType"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Bearer"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specify the Authentication scheme."}]},{"type":"element","tag":"h2","props":{"id":"authheader"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"authHeader"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Authorization"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Name of the Authentication token header."}]},{"type":"element","tag":"h2","props":{"id":"tokenstorage"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tokenStorage"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cookie"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specify if the auth token should be stored in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cookie"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"localStorage"}]},{"type":"text","value":". "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Cookie"}]},{"type":"text","value":" storage is required for SSR."}]},{"type":"element","tag":"h2","props":{"id":"proxycookies"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"proxyCookies"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"true"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specify if client cookies should be proxied to the server."}]},{"type":"element","tag":"h2","props":{"id":"clients"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"clients"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Configure your Apollo Client instances."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n modules: ['@nuxtjs/apollo'],\n\n apollo: {\n clients: {\n default: {\n httpEndpoint: '',\n browserHttpEndpoint: '',\n wsEndpoint: '',\n httpLinkOptions: {},\n wsLinkOptions: {},\n wsEndpoint: '',\n websocketsOnly: false,\n connectToDevTools: false,\n defaultOptions: {},\n inMemoryCacheOptions: {},\n tokenName: 'apollo:.token',\n tokenStorage: 'cookie',\n authType: 'Bearer',\n authHeader: 'Authorization'\n },\n other: './apollo/other.ts'\n }\n }\n})\n","filename":"nuxt.config.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default defineNuxtConfig({\n modules: ['@nuxtjs/apollo'],\n\n apollo: {\n clients: {\n default: {\n httpEndpoint: '',\n browserHttpEndpoint: '',\n wsEndpoint: '',\n httpLinkOptions: {},\n wsLinkOptions: {},\n wsEndpoint: '',\n websocketsOnly: false,\n connectToDevTools: false,\n defaultOptions: {},\n inMemoryCacheOptions: {},\n tokenName: 'apollo:.token',\n tokenStorage: 'cookie',\n authType: 'Bearer',\n authHeader: 'Authorization'\n },\n other: './apollo/other.ts'\n }\n }\n})\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"import { defineApolloClient } from '@nuxtjs/apollo'\n\nexport default defineApolloClient({\n httpEndpoint: '',\n browserHttpEndpoint: '',\n wsEndpoint: '',\n httpLinkOptions: {},\n wsLinkOptions: {},\n wsEndpoint: '',\n websocketsOnly: false,\n connectToDevTools: false,\n defaultOptions: {},\n inMemoryCacheOptions: {},\n tokenName: 'apollo:.token',\n tokenStorage: 'cookie',\n authType: 'Bearer',\n authHeader: 'Authorization'\n})\n","filename":"apollo/other.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { defineApolloClient } from '@nuxtjs/apollo'\n\nexport default defineApolloClient({\n httpEndpoint: '',\n browserHttpEndpoint: '',\n wsEndpoint: '',\n httpLinkOptions: {},\n wsLinkOptions: {},\n wsEndpoint: '',\n websocketsOnly: false,\n connectToDevTools: false,\n defaultOptions: {},\n inMemoryCacheOptions: {},\n tokenName: 'apollo:.token',\n tokenStorage: 'cookie',\n authType: 'Bearer',\n authHeader: 'Authorization'\n})\n"}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"h3","props":{"id":"httpendpoint"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"httpEndpoint"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The GraphQL endpoint."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"h3","props":{"id":"browserhttpendpoint"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"browserHttpEndpoint"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Provide a GraphQL endpoint to be used client-side. Overrides "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"httpEndpoint"}]},{"type":"text","value":"."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"h3","props":{"id":"httplinkoptions"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"httpLinkOptions"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Provide additional configuration for the "},{"type":"element","tag":"a","props":{"href":"https://www.apollographql.com/docs/link/links/http.html#options","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"HttpLink"}]},{"type":"text","value":"."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"h3","props":{"id":"wslinkoptions"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"wsLinkOptions"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Provide additional configuration for the "},{"type":"element","tag":"a","props":{"href":"https://github.com/enisdenjo/graphql-ws/blob/master/docs/interfaces/client.ClientOptions.md","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GraphQLWsLink"}]}]},{"type":"text","value":"."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"h3","props":{"id":"wsendpoint"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"wsEndpoint"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specify a websocket endpoint to be used for subscriptions. The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"wss"}]},{"type":"text","value":" protocol is recommended in production."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"h3","props":{"id":"websocketsonly"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"websocketsOnly"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specify if the client should solely use WebSocket. requires "},{"type":"element","tag":"a","props":{"href":"#wsendpoint"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"wsEndpoint"}]}]},{"type":"text","value":"."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"h3","props":{"id":"connecttodevtools"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"connectToDevTools"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"true"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specify if the client should be able to connect to the Apollo Client Devtools in production mode."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"h3","props":{"id":"defaultoptions"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"defaultOptions"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Configure default options to be applied to the apollo client."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"h3","props":{"id":"inmemorycacheoptions"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"inMemoryCacheOptions"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Additional configuration for the in-memory cache."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"h3","props":{"id":"tokenname"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tokenName"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"apollo:.token\""}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specify the name under which the token will be stored."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"h3","props":{"id":"tokenstorage-1"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tokenStorage"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cookie"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specify if the auth token should be stored in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cookie"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"localStorage"}]},{"type":"text","value":". "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Cookie"}]},{"type":"text","value":" storage is required for SSR."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"h3","props":{"id":"authtype-1"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"authType"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Bearer"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specify the Authentication scheme."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"h3","props":{"id":"authheader-1"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"authHeader"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Authorization"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Name of the Authentication token header."}]}]},"_type":"markdown","_id":"content:1.getting-started:2.configuration.md","_source":"content","_file":"1.getting-started/2.configuration.md","_extension":"md"},{"_path":"/getting-started/auth-helpers","_draft":false,"_partial":false,"_empty":false,"title":"Auth Helpers","description":"Helper functions for working with authentication in Apollo.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt Apollo provides three (3) auth helpers which can be easily plugged into your authentication flow to interface with configured Apollo clients."}]},{"type":"element","tag":"h2","props":{"id":"gettoken"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"getToken"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Retrieve the auth token token for the specified client."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This adheres to the "},{"type":"element","tag":"a","props":{"href":"/recipes/authentication#auth-hook"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"apollo:auth"}]},{"type":"text","value":" hook"}]},{"type":"text","value":". and will attempt to automatically retrieve the token from the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"apollo:auth"}]},{"type":"text","value":" hook."}]},{"type":"element","tag":"code","props":{"code":"const { getToken } = useApollo()\n\nconst token = getToken()\n\nconst otherToken = getToken('')\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const { getToken } = useApollo()\n\nconst token = getToken()\n\nconst otherToken = getToken('')\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"gettoken-reference"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"getToken"}]},{"type":"text","value":" Reference"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"client"}]},{"type":"text","value":": The Apollo client who's token should be retrieved."}]}]},{"type":"element","tag":"h2","props":{"id":"onlogin"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"onLogin"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Used to apply the given auth token to the specified Apollo client. This is required if your GraphQL API expects authentication to be passed via a HTTP header."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default, this function will reset the Apollo client cache and re-execute all queries, this behavior can be averted by passing "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"false"}]},{"type":"text","value":" as the third parameter ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"skipResetStore"}]},{"type":"text","value":")."}]},{"type":"element","tag":"code","props":{"code":"const { onLogin } = useApollo()\n\nfunction handleLogin() {\n // your login flow...\n\n onLogin(token)\n}\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const { onLogin } = useApollo()\n\nfunction handleLogin() {\n // your login flow...\n\n onLogin(token)\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"onlogin-reference"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"onLogin"}]},{"type":"text","value":" Reference"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"token"}]},{"type":"text","value":": The token to be applied."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"client"}]},{"type":"text","value":": The Apollo client to authenticate."},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"default"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"skipResetStore"}]},{"type":"text","value":": Whether to skip resetting the Apollo client cache."},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"false"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"onlogout"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"onLogout"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Used to remove the auth token from the specified Apollo client."}]},{"type":"element","tag":"code","props":{"code":"const { onLogout } = useApollo()\n\nfunction handleLogout() {\n // your logout flow...\n\n onLogout()\n}\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const { onLogout } = useApollo()\n\nfunction handleLogout() {\n // your logout flow...\n\n onLogout()\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"onlogout-reference"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"onLogout"}]},{"type":"text","value":" Reference"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"client"}]},{"type":"text","value":": The Apollo client to de-authenticate."},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"default"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"skipResetStore"}]},{"type":"text","value":": Whether to skip resetting the Apollo client cache."},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"false"}]}]}]}]}]}]},"_type":"markdown","_id":"content:1.getting-started:4.auth-helpers.md","_source":"content","_file":"1.getting-started/4.auth-helpers.md","_extension":"md"}]