[{"_path":"/getting-started/quick-start","_draft":false,"_partial":false,"_empty":false,"title":"Quick Start","description":"Integrate Nuxt Apollo into your project.","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"installation"},"children":[{"type":"text","value":"Installation"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxtjs/apollo"}]},{"type":"text","value":" development dependency."},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"yarn add -D @nuxtjs/apollo@next\n","filename":"Yarn","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yarn add -D @nuxtjs/apollo@next\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"npm i -D @nuxtjs/apollo@next\n","filename":"NPM","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm i -D @nuxtjs/apollo@next\n"}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Enable the module."},{"type":"element","tag":"code","props":{"code":"import { defineNuxtConfig } from 'nuxt/config'\n\nexport default defineNuxtConfig({\n  modules: ['@nuxtjs/apollo'],\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":"import { defineNuxtConfig } from 'nuxt/config'\n\nexport default defineNuxtConfig({\n  modules: ['@nuxtjs/apollo'],\n})\n"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add Nuxt Apollo Configuration."},{"type":"element","tag":"code","props":{"code":"import { defineNuxtConfig } from 'nuxt/config'\n\nexport default defineNuxtConfig({\n  modules: ['@nuxtjs/apollo'],\n\n  apollo: {\n    clients: {\n      default: {\n        httpEndpoint: 'https://api.spacex.land/graphql'\n      }\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":"import { defineNuxtConfig } from 'nuxt/config'\n\nexport default defineNuxtConfig({\n  modules: ['@nuxtjs/apollo'],\n\n  apollo: {\n    clients: {\n      default: {\n        httpEndpoint: 'https://api.spacex.land/graphql'\n      }\n    },\n  },\n})\n"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example Usage."},{"type":"element","tag":"alert","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt Apollo automatically imports the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gql"}]},{"type":"text","value":" tag function as well as "},{"type":"element","tag":"a","props":{"href":"/getting-started/composables"},"children":[{"type":"text","value":"key composables"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <p>There are {{ data?.ships?.length || 0 }} ships.</p>\n</template>\n\n<script lang=\"ts\" setup>\nconst query = gql`\n  query getShips($limit: Int!) {\n    ships(limit: $limit) {\n      id\n      name\n    }\n  }\n`\nconst variables = { limit: 5 }\n\nconst { data } = await useAsyncQuery(query, variables)\n</script>\n","filename":"app.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<template>\n  <p>There are {{ data?.ships?.length || 0 }} ships.</p>\n</template>\n\n<script lang=\"ts\" setup>\nconst query = gql`\n  query getShips($limit: Int!) {\n    ships(limit: $limit) {\n      id\n      name\n    }\n  }\n`\nconst variables = { limit: 5 }\n\nconst { data } = await useAsyncQuery(query, variables)\n</script>\n"}]}]}]}]}]}]},"_type":"markdown","_id":"content:1.getting-started:1.quick-start.md","_source":"content","_file":"1.getting-started/1.quick-start.md","_extension":"md"},{"_path":"/getting-started/composables","_draft":false,"_partial":false,"_empty":false,"title":"Composables","description":"Nuxt Apollo provides and Auto Imports key composables for seamless usage throughout your application.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt Apollo provides and "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/guide/concepts/auto-imports","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Auto Imports"}]},{"type":"text","value":" key composables for seamless usage throughout your application."}]},{"type":"element","tag":"h2","props":{"id":"useapollo"},"children":[{"type":"text","value":"useApollo"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useApollo"}]},{"type":"text","value":" allows you to utilize "},{"type":"element","tag":"a","props":{"href":"/getting-started/auth-helpers"},"children":[{"type":"text","value":"Nuxt Apollo's authentication helpers"}]},{"type":"text","value":" as well as easily access the configured Apollo clients."}]},{"type":"element","tag":"code","props":{"code":"const { clients, getToken, onLogin, onLogout } = useApollo()\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const { clients, getToken, onLogin, onLogout } = useApollo()\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"useasyncquery"},"children":[{"type":"text","value":"useAsyncQuery"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is a convenience wrapper around Nuxt's "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/api/composables/use-async-data/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"useAsyncData"}]},{"type":"text","value":" that allows you to easily query the Apollo client. The returned result is the extracted data property from the GraphQL query."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useAsyncQuery"}]},{"type":"text","value":" is primarily used for querying data when a page or component is initially loaded. Have a look at "},{"type":"element","tag":"a","props":{"href":"#usequery"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useQuery"}]}]},{"type":"text","value":" for fetching data upon user interaction."}]},{"type":"element","tag":"code","props":{"code":"const query = gql`\nquery getShips($limit: Int!) {\n  ships(limit: $limit) {\n    id\n  }\n}`\n\nconst { data } = await useAsyncQuery(query, { limit: 2 })\n\nif (data.value?.ships) {\n  // log response\n  console.log(data.value.ships)\n}\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const query = gql`\nquery getShips($limit: Int!) {\n  ships(limit: $limit) {\n    id\n  }\n}`\n\nconst { data } = await useAsyncQuery(query, { limit: 2 })\n\nif (data.value?.ships) {\n  // log response\n  console.log(data.value.ships)\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"uselazyasyncquery"},"children":[{"type":"text","value":"useLazyAsyncQuery"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useLazyAsyncQuery"}]},{"type":"text","value":" composable provides a wrapper around "},{"type":"element","tag":"a","props":{"href":"#useasyncquery"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useAsyncQuery"}]}]},{"type":"text","value":" that lazily loads the specified query."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Unlike it's counterpart "},{"type":"element","tag":"a","props":{"href":"#useasyncquery"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useAsyncQuery"}]}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useLazyAsyncQuery"}]},{"type":"text","value":" is non-blocking, hence the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":" state of your result must be manually handled."}]},{"type":"element","tag":"code","props":{"code":"const query = gql`\n  query currentUser { \n    whoAmI { \n      id \n    }\n  }\n`\n\nconst { data } = await useAsyncQuery(query)\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const query = gql`\n  query currentUser { \n    whoAmI { \n      id \n    }\n  }\n`\n\nconst { data } = await useAsyncQuery(query)\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"usequery"},"children":[{"type":"text","value":"useQuery"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is the primary method of querying your GraphQL server, unlike "},{"type":"element","tag":"a","props":{"href":"#useasyncquery"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useAsyncQuery"}]}]},{"type":"text","value":" which is best used for initially fetching data in SSR applications, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useQuery"}]},{"type":"text","value":" can comfortably be used in any scenario."}]},{"type":"element","tag":"code","props":{"code":"const query = gql`\n  query getShips($limit: Int!) {\n    ships(limit: $limit) {\n      id\n    }\n  }\n`\n\nconst variables = { limit: 5 }\n\nconst { result } = useQuery(query, variables)\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const query = gql`\n  query getShips($limit: Int!) {\n    ships(limit: $limit) {\n      id\n    }\n  }\n`\n\nconst variables = { limit: 5 }\n\nconst { result } = useQuery(query, variables)\n"}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More Information on "},{"type":"element","tag":"a","props":{"href":"https://v4.apollo.vuejs.org/api/use-query.html#usequery","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Vue Apollo's "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useQuery"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"usemutation"},"children":[{"type":"text","value":"useMutation"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useMutation"}]},{"type":"text","value":" composable allows you to modify server-side data"}]},{"type":"element","tag":"code","props":{"code":"const query = gql`\n  mutation addUser ($input: UserInput!) {\n    addUser (input: $input) {\n      id\n    }\n  }\n`\n\nconst variables = {\n  name: 'John Doe',\n  email: 'jd@example.com'\n}\n\nconst { mutate } = useMutation(query, { variables })\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const query = gql`\n  mutation addUser ($input: UserInput!) {\n    addUser (input: $input) {\n      id\n    }\n  }\n`\n\nconst variables = {\n  name: 'John Doe',\n  email: 'jd@example.com'\n}\n\nconst { mutate } = useMutation(query, { variables })\n"}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More Information on "},{"type":"element","tag":"a","props":{"href":"https://v4.apollo.vuejs.org/api/use-mutation.html#usemutation","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Vue Apollo's "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useMutation"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"usesubscription"},"children":[{"type":"text","value":"useSubscription"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useSubscription"}]},{"type":"text","value":" composable allows you to interface with WebSocket compliant GraphQL servers to listen for realtime updates."}]},{"type":"element","tag":"alert","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt Apollo currently only supports subscriptions over WebSockets."}]}]},{"type":"element","tag":"code","props":{"code":"const query = gql`\n  subscription onMessageAdded($channelId: ID!) {\n    messageAdded(channelId: $channelId) {\n      id\n      text\n    }\n  }\n`\n\nconst variables = { channelId: 'abc' }\n\nconst { result } = useSubscription(query, variables)\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const query = gql`\n  subscription onMessageAdded($channelId: ID!) {\n    messageAdded(channelId: $channelId) {\n      id\n      text\n    }\n  }\n`\n\nconst variables = { channelId: 'abc' }\n\nconst { result } = useSubscription(query, variables)\n"}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More Information on "},{"type":"element","tag":"a","props":{"href":"https://v4.apollo.vuejs.org/api/use-subscription.html#usesubscription","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Vue Apollo's "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useSubscription"}]}]}]}]}]},"_type":"markdown","_id":"content:1.getting-started:3.composables.md","_source":"content","_file":"1.getting-started/3.composables.md","_extension":"md"}]