[{"data":1,"prerenderedAt":375},["ShallowReactive",2],{"blog-article-/blog/nuxt-using-apollo-to-fetch-data":3,"blog-surround-/blog/nuxt-using-apollo-to-fetch-data":366},{"id":4,"title":5,"body":6,"canonical":352,"date":353,"description":354,"extension":355,"featured":356,"image":357,"meta":358,"navigation":58,"ogImage":352,"path":359,"provider":360,"published":356,"seo":361,"stem":362,"tags":363,"url":352,"__hash__":365},"blog/blog/nuxt-using-apollo-to-fetch-data.md","Using Apollo to Fetch Data",{"type":7,"value":8,"toc":350},"minimark",[9,157,161,223,226,278,281,346],[10,11,17],"pre",{"className":12,"code":13,"filename":14,"language":15,"meta":16,"style":16},"language-js shiki shiki-themes github-light github-dark","import { HttpLink } from 'apollo-link-http'\nimport { InMemoryCache } from 'apollo-cache-inmemory'\n\n// Replace this with your project's endpoint\nconst GRAPHCMS_API = 'https://debbie-codes.herokuapp.com/v1/graphql'\n\nexport default () => ({\n  link: new HttpLink({ uri: GRAPHCMS_API }),\n  cache: new InMemoryCache(),\n  defaultHttpLink: false\n})\n","apollo/client-configs.js","js","",[18,19,20,40,53,60,67,83,88,106,128,142,151],"code",{"__ignoreMap":16},[21,22,25,29,33,36],"span",{"class":23,"line":24},"line",1,[21,26,28],{"class":27},"szBVR","import",[21,30,32],{"class":31},"sVt8B"," { HttpLink } ",[21,34,35],{"class":27},"from",[21,37,39],{"class":38},"sZZnC"," 'apollo-link-http'\n",[21,41,43,45,48,50],{"class":23,"line":42},2,[21,44,28],{"class":27},[21,46,47],{"class":31}," { InMemoryCache } ",[21,49,35],{"class":27},[21,51,52],{"class":38}," 'apollo-cache-inmemory'\n",[21,54,56],{"class":23,"line":55},3,[21,57,59],{"emptyLinePlaceholder":58},true,"\n",[21,61,63],{"class":23,"line":62},4,[21,64,66],{"class":65},"sJ8bj","// Replace this with your project's endpoint\n",[21,68,70,73,77,80],{"class":23,"line":69},5,[21,71,72],{"class":27},"const",[21,74,76],{"class":75},"sj4cs"," GRAPHCMS_API",[21,78,79],{"class":27}," =",[21,81,82],{"class":38}," 'https://debbie-codes.herokuapp.com/v1/graphql'\n",[21,84,86],{"class":23,"line":85},6,[21,87,59],{"emptyLinePlaceholder":58},[21,89,91,94,97,100,103],{"class":23,"line":90},7,[21,92,93],{"class":27},"export",[21,95,96],{"class":27}," default",[21,98,99],{"class":31}," () ",[21,101,102],{"class":27},"=>",[21,104,105],{"class":31}," ({\n",[21,107,109,112,115,119,122,125],{"class":23,"line":108},8,[21,110,111],{"class":31},"  link: ",[21,113,114],{"class":27},"new",[21,116,118],{"class":117},"sScJk"," HttpLink",[21,120,121],{"class":31},"({ uri: ",[21,123,124],{"class":75},"GRAPHCMS_API",[21,126,127],{"class":31}," }),\n",[21,129,131,134,136,139],{"class":23,"line":130},9,[21,132,133],{"class":31},"  cache: ",[21,135,114],{"class":27},[21,137,138],{"class":117}," InMemoryCache",[21,140,141],{"class":31},"(),\n",[21,143,145,148],{"class":23,"line":144},10,[21,146,147],{"class":31},"  defaultHttpLink: ",[21,149,150],{"class":75},"false\n",[21,152,154],{"class":23,"line":153},11,[21,155,156],{"class":31},"})\n",[158,159,160],"p",{},"We need to use the graphql-tag to be able to add our query so first we import this import gql from 'graphql-tag' We can then make our query listing all the data that we want to receive and ordering by what we prefer. Here we just added an export const called workshop and make it equal to our gql tag which has a query called workshops and that queries the workshops table.",[10,162,164],{"className":12,"code":163,"filename":14,"language":15,"meta":16,"style":16},"export const workshops = gql`\n  query workshops {\n    workshops(order_by: { date: desc }) {\n      date\n      title\n      year\n    }\n  }\n`\n",[18,165,166,184,189,194,199,204,209,214,219],{"__ignoreMap":16},[21,167,168,170,173,176,178,181],{"class":23,"line":24},[21,169,93],{"class":27},[21,171,172],{"class":27}," const",[21,174,175],{"class":75}," workshops",[21,177,79],{"class":27},[21,179,180],{"class":117}," gql",[21,182,183],{"class":38},"`\n",[21,185,186],{"class":23,"line":42},[21,187,188],{"class":38},"  query workshops {\n",[21,190,191],{"class":23,"line":55},[21,192,193],{"class":38},"    workshops(order_by: { date: desc }) {\n",[21,195,196],{"class":23,"line":62},[21,197,198],{"class":38},"      date\n",[21,200,201],{"class":23,"line":69},[21,202,203],{"class":38},"      title\n",[21,205,206],{"class":23,"line":85},[21,207,208],{"class":38},"      year\n",[21,210,211],{"class":23,"line":90},[21,212,213],{"class":38},"    }\n",[21,215,216],{"class":23,"line":108},[21,217,218],{"class":38},"  }\n",[21,220,221],{"class":23,"line":130},[21,222,183],{"class":38},[158,224,225],{},"Then we need to use apollo so that we can get our data to our template. Don't forget to first install '@nuxtjs/apollo', and then add to the modules of our next config.",[10,227,229],{"className":12,"code":228,"filename":14,"language":15,"meta":16,"style":16},"apollo: {\n    $loadingKey: 'loading',\n    workshops: {\n      query: workshops,\n    },\n  },\n",[18,230,231,239,253,260,268,273],{"__ignoreMap":16},[21,232,233,236],{"class":23,"line":24},[21,234,235],{"class":117},"apollo",[21,237,238],{"class":31},": {\n",[21,240,241,244,247,250],{"class":23,"line":42},[21,242,243],{"class":117},"    $loadingKey",[21,245,246],{"class":31},": ",[21,248,249],{"class":38},"'loading'",[21,251,252],{"class":31},",\n",[21,254,255,258],{"class":23,"line":55},[21,256,257],{"class":117},"    workshops",[21,259,238],{"class":31},[21,261,262,265],{"class":23,"line":62},[21,263,264],{"class":117},"      query",[21,266,267],{"class":31},": workshops,\n",[21,269,270],{"class":23,"line":69},[21,271,272],{"class":31},"    },\n",[21,274,275],{"class":23,"line":85},[21,276,277],{"class":31},"  },\n",[158,279,280],{},"And now we can do a v-for over all our data and print the title for example",[10,282,284],{"className":12,"code":283,"filename":14,"language":15,"meta":16,"style":16},"\n\u003Cdiv v-for=\"(workshop, index) in workshops\" :key=\"index\" class=\"flex\">\n  \u003Cp>{{workshop.title}}\u003C/p>\n\u003C/div>\n",[18,285,286,290,323,337],{"__ignoreMap":16},[21,287,288],{"class":23,"line":24},[21,289,59],{"emptyLinePlaceholder":58},[21,291,292,295,299,302,305,308,312,315,317,320],{"class":23,"line":42},[21,293,294],{"class":31},"\u003C",[21,296,298],{"class":297},"s9eBZ","div",[21,300,301],{"class":117}," v-for",[21,303,304],{"class":27},"=",[21,306,307],{"class":38},"\"(workshop, index) in workshops\"",[21,309,311],{"class":310},"s7hpK"," :key=\"index\"",[21,313,314],{"class":117}," class",[21,316,304],{"class":27},[21,318,319],{"class":38},"\"flex\"",[21,321,322],{"class":31},">\n",[21,324,325,328,330,333,335],{"class":23,"line":55},[21,326,327],{"class":31},"  \u003C",[21,329,158],{"class":297},[21,331,332],{"class":31},">{{workshop.title}}\u003C/",[21,334,158],{"class":297},[21,336,322],{"class":31},[21,338,339,342,344],{"class":23,"line":62},[21,340,341],{"class":31},"\u003C/",[21,343,298],{"class":297},[21,345,322],{"class":31},[347,348,349],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":16,"searchDepth":42,"depth":42,"links":351},[],null,"2020-07-17","Using Apollo to Fetch Data from a GraphQL API","md",false,"photo-1516979187457-637abb4f9353?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop",{},"/blog/nuxt-using-apollo-to-fetch-data","imgix",{"title":5,"description":354},"blog/nuxt-using-apollo-to-fetch-data",[364],"nuxt","GiSOO8PU1qmAwBA4hk8jRO1XckiHjO7kK5XvNrLdxgU",[367,371],{"title":368,"path":369,"stem":370,"children":-1},"Migrating to Nuxt content","/blog/nuxt-migrating-to-nuxt-content","blog/nuxt-migrating-to-nuxt-content",{"title":372,"path":373,"stem":374,"children":-1},"Create a Blog with Nuxt Content","/blog/create-a-blog-with-nuxt-content","blog/create-a-blog-with-nuxt-content",1790839748197]