{"_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"}]}]}]}]}]},"body":{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a65c52"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-28ffcc"},"children":[{"type":"text","value":"clients"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-28ffcc"},"children":[{"type":"text","value":"getToken"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-28ffcc"},"children":[{"type":"text","value":"onLogin"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-28ffcc"},"children":[{"type":"text","value":"onLogout"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-93735e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3d134d"},"children":[{"type":"text","value":"useApollo"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":"()"}]}]}]}]}]},{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a65c52"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-28ffcc"},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-93735e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3d134d"},"children":[{"type":"text","value":"gql"}]},{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"query getShips($limit: Int!) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"  ships(limit: $limit) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"    id"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"}`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a65c52"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-28ffcc"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-93735e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a65c52"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3d134d"},"children":[{"type":"text","value":"useAsyncQuery"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-c50709"},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":", { "}]},{"type":"element","tag":"span","props":{"class":"ct-c50709"},"children":[{"type":"text","value":"limit"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-0296bd"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a65c52"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-28ffcc"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-28ffcc"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-c50709"},"children":[{"type":"text","value":"ships"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-71d021"},"children":[{"type":"text","value":"// log response"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-28ffcc"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3d134d"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-28ffcc"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-28ffcc"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c50709"},"children":[{"type":"text","value":"ships"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a65c52"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-28ffcc"},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-93735e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3d134d"},"children":[{"type":"text","value":"gql"}]},{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"  query currentUser { "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"    whoAmI { "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"      id "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a65c52"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-28ffcc"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-93735e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a65c52"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3d134d"},"children":[{"type":"text","value":"useAsyncQuery"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-c50709"},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":")"}]}]}]}]}]},{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a65c52"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-28ffcc"},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-93735e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3d134d"},"children":[{"type":"text","value":"gql"}]},{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"  query getShips($limit: Int!) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"    ships(limit: $limit) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"      id"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a65c52"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-28ffcc"},"children":[{"type":"text","value":"variables"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-93735e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-c50709"},"children":[{"type":"text","value":"limit"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-0296bd"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a65c52"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-28ffcc"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-93735e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3d134d"},"children":[{"type":"text","value":"useQuery"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-c50709"},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-c50709"},"children":[{"type":"text","value":"variables"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":")"}]}]}]}]}]},{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a65c52"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-28ffcc"},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-93735e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3d134d"},"children":[{"type":"text","value":"gql"}]},{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"  mutation addUser ($input: UserInput!) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"    addUser (input: $input) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"      id"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a65c52"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-28ffcc"},"children":[{"type":"text","value":"variables"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-93735e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-c50709"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"'John Doe'"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-c50709"},"children":[{"type":"text","value":"email"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"'jd@example.com'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a65c52"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-28ffcc"},"children":[{"type":"text","value":"mutate"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-93735e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3d134d"},"children":[{"type":"text","value":"useMutation"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-c50709"},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":", { "}]},{"type":"element","tag":"span","props":{"class":"ct-c50709"},"children":[{"type":"text","value":"variables"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" })"}]}]}]}]}]},{"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":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a65c52"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-28ffcc"},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-93735e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3d134d"},"children":[{"type":"text","value":"gql"}]},{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"  subscription onMessageAdded($channelId: ID!) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"    messageAdded(channelId: $channelId) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"      id"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"      text"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a65c52"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-28ffcc"},"children":[{"type":"text","value":"variables"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-93735e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-c50709"},"children":[{"type":"text","value":"channelId"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-011c4d"},"children":[{"type":"text","value":"'abc'"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a65c52"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-28ffcc"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-93735e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3d134d"},"children":[{"type":"text","value":"useSubscription"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-c50709"},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-c50709"},"children":[{"type":"text","value":"variables"}]},{"type":"element","tag":"span","props":{"class":"ct-c834b5"},"children":[{"type":"text","value":")"}]}]}]}]}]},{"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":"element","tag":"style","children":[{"type":"text","value":".ct-71d021{color:#7F848E}.ct-0296bd{color:#D19A66}.ct-c50709{color:#E06C75}.ct-011c4d{color:#98C379}.ct-3d134d{color:#61AFEF}.ct-93735e{color:#56B6C2}.ct-28ffcc{color:#E5C07B}.ct-c834b5{color:#ABB2BF}.ct-a65c52{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"useapollo","depth":2,"text":"useApollo"},{"id":"useasyncquery","depth":2,"text":"useAsyncQuery"},{"id":"uselazyasyncquery","depth":2,"text":"useLazyAsyncQuery"},{"id":"usequery","depth":2,"text":"useQuery"},{"id":"usemutation","depth":2,"text":"useMutation"},{"id":"usesubscription","depth":2,"text":"useSubscription"}]}},"_type":"markdown","_id":"content:1.getting-started:3.composables.md","_source":"content","_file":"1.getting-started/3.composables.md","_extension":"md"}