[{"data":1,"prerenderedAt":571},["ShallowReactive",2],{"blog-article-/blog/nuxt-fetching-graphql-queries":3,"blog-surround-/blog/nuxt-fetching-graphql-queries":562},{"id":4,"title":5,"body":6,"canonical":549,"date":550,"description":5,"extension":551,"featured":552,"image":553,"meta":554,"navigation":211,"ogImage":549,"path":555,"provider":556,"published":552,"seo":557,"stem":558,"tags":559,"url":549,"__hash__":561},"blog/blog/nuxt-fetching-graphql-queries.md","Fetching graphQL queries",{"type":7,"value":8,"toc":547},"minimark",[9,13,23,66,69,112,115,118,121,124,127,130,135,245,248,253,288,291,296,327,330,333,337,392,395,398,401,404,408,494,497,501,543],[10,11,12],"p",{},"How to fetch data from graphQL without having to use libraries such as apollo",[10,14,15,16],{},"Install ",[17,18,22],"a",{"href":19,"rel":20},"https://http.nuxtjs.org/",[21],"nofollow","http module",[24,25,30],"pre",{"className":26,"code":27,"language":28,"meta":29,"style":29},"language-bash shiki shiki-themes github-light github-dark","npm install @nuxt/http\nor\nyarn add @nuxt/http\n","bash","",[31,32,33,49,55],"code",{"__ignoreMap":29},[34,35,38,42,46],"span",{"class":36,"line":37},"line",1,[34,39,41],{"class":40},"sScJk","npm",[34,43,45],{"class":44},"sZZnC"," install",[34,47,48],{"class":44}," @nuxt/http\n",[34,50,52],{"class":36,"line":51},2,[34,53,54],{"class":40},"or\n",[34,56,58,61,64],{"class":36,"line":57},3,[34,59,60],{"class":40},"yarn",[34,62,63],{"class":44}," add",[34,65,48],{"class":44},[10,67,68],{},"Add it to the nuxt config",[24,70,74],{"className":71,"code":72,"language":73,"meta":29,"style":29},"language-jsx shiki shiki-themes github-light github-dark","module.exports = {\n  modules: ['@nuxt/http']\n}\n","jsx",[31,75,76,96,107],{"__ignoreMap":29},[34,77,78,82,86,89,93],{"class":36,"line":37},[34,79,81],{"class":80},"sj4cs","module",[34,83,85],{"class":84},"sVt8B",".",[34,87,88],{"class":80},"exports",[34,90,92],{"class":91},"szBVR"," =",[34,94,95],{"class":84}," {\n",[34,97,98,101,104],{"class":36,"line":51},[34,99,100],{"class":84},"  modules: [",[34,102,103],{"class":44},"'@nuxt/http'",[34,105,106],{"class":84},"]\n",[34,108,109],{"class":36,"line":57},[34,110,111],{"class":84},"}\n",[10,113,114],{},"create a plugin",[10,116,117],{},"pass in destructured $http and env from context",[10,119,120],{},"use inject method to inject our plugin so we can use it across our app",[10,122,123],{},"create a variable called $hasura which uses $http using the create helper and pass in the prefixUrl of our api which we can store as an env Variable",[10,125,126],{},"set headers for hasura admin secret if needed",[10,128,129],{},"inject the key of hasura with the value of $hasura using the $post method and binding our hasura variable",[10,131,132],{},[31,133,134],{},"plugins/hasura.js",[24,136,138],{"className":71,"code":137,"language":73,"meta":29,"style":29},"export default function ({ $http, env }, inject) {\n  const $hasura = $http.create({\n    prefixUrl: env.API_HASURA_URL\n  })\n\n  inject('hasura', $hasura.$post.bind($hasura, ''))\n}\n",[31,139,140,173,192,200,206,213,240],{"__ignoreMap":29},[34,141,142,145,148,151,154,158,161,164,167,170],{"class":36,"line":37},[34,143,144],{"class":91},"export",[34,146,147],{"class":91}," default",[34,149,150],{"class":91}," function",[34,152,153],{"class":84}," ({ ",[34,155,157],{"class":156},"s4XuR","$http",[34,159,160],{"class":84},", ",[34,162,163],{"class":156},"env",[34,165,166],{"class":84}," }, ",[34,168,169],{"class":156},"inject",[34,171,172],{"class":84},") {\n",[34,174,175,178,181,183,186,189],{"class":36,"line":51},[34,176,177],{"class":91},"  const",[34,179,180],{"class":80}," $hasura",[34,182,92],{"class":91},[34,184,185],{"class":84}," $http.",[34,187,188],{"class":40},"create",[34,190,191],{"class":84},"({\n",[34,193,194,197],{"class":36,"line":57},[34,195,196],{"class":84},"    prefixUrl: env.",[34,198,199],{"class":80},"API_HASURA_URL\n",[34,201,203],{"class":36,"line":202},4,[34,204,205],{"class":84},"  })\n",[34,207,209],{"class":36,"line":208},5,[34,210,212],{"emptyLinePlaceholder":211},true,"\n",[34,214,216,219,222,225,228,231,234,237],{"class":36,"line":215},6,[34,217,218],{"class":40},"  inject",[34,220,221],{"class":84},"(",[34,223,224],{"class":44},"'hasura'",[34,226,227],{"class":84},", $hasura.$post.",[34,229,230],{"class":40},"bind",[34,232,233],{"class":84},"($hasura, ",[34,235,236],{"class":44},"''",[34,238,239],{"class":84},"))\n",[34,241,243],{"class":36,"line":242},7,[34,244,111],{"class":84},[10,246,247],{},"Add your endpoint as env variable",[10,249,250],{},[31,251,252],{},"nuxt.config.js",[24,254,256],{"className":71,"code":255,"language":73,"meta":29,"style":29},"export default {\n  env: {\n    API_HASURA_URL: 'https://debbie-codes.herokuapp.com/v1/graphql'\n  }\n}\n",[31,257,258,266,271,279,284],{"__ignoreMap":29},[34,259,260,262,264],{"class":36,"line":37},[34,261,144],{"class":91},[34,263,147],{"class":91},[34,265,95],{"class":84},[34,267,268],{"class":36,"line":51},[34,269,270],{"class":84},"  env: {\n",[34,272,273,276],{"class":36,"line":57},[34,274,275],{"class":84},"    API_HASURA_URL: ",[34,277,278],{"class":44},"'https://debbie-codes.herokuapp.com/v1/graphql'\n",[34,280,281],{"class":36,"line":202},[34,282,283],{"class":84},"  }\n",[34,285,286],{"class":36,"line":208},[34,287,111],{"class":84},[10,289,290],{},"import graphql and print so it prints the query",[10,292,293],{},[31,294,295],{},"pages/workshops.vue",[24,297,299],{"className":71,"code":298,"language":73,"meta":29,"style":29},"import gql from 'graphql-tag'\nimport { print } from 'graphql/language/printer'\n",[31,300,301,315],{"__ignoreMap":29},[34,302,303,306,309,312],{"class":36,"line":37},[34,304,305],{"class":91},"import",[34,307,308],{"class":84}," gql ",[34,310,311],{"class":91},"from",[34,313,314],{"class":44}," 'graphql-tag'\n",[34,316,317,319,322,324],{"class":36,"line":51},[34,318,305],{"class":91},[34,320,321],{"class":84}," { print } ",[34,323,311],{"class":91},[34,325,326],{"class":44}," 'graphql/language/printer'\n",[10,328,329],{},"make your query using gpl tag",[10,331,332],{},"query the table and fields you want to show",[10,334,335],{},[31,336,295],{},[24,338,340],{"className":71,"code":339,"language":73,"meta":29,"style":29},"const QUERY = gql`\n  query {\n    workshops(order_by: { date: desc }) {\n      name\n      topic\n    }\n  }\n`\n",[31,341,342,358,363,368,373,378,383,387],{"__ignoreMap":29},[34,343,344,347,350,352,355],{"class":36,"line":37},[34,345,346],{"class":91},"const",[34,348,349],{"class":80}," QUERY",[34,351,92],{"class":91},[34,353,354],{"class":40}," gql",[34,356,357],{"class":44},"`\n",[34,359,360],{"class":36,"line":51},[34,361,362],{"class":44},"  query {\n",[34,364,365],{"class":36,"line":57},[34,366,367],{"class":44},"    workshops(order_by: { date: desc }) {\n",[34,369,370],{"class":36,"line":202},[34,371,372],{"class":44},"      name\n",[34,374,375],{"class":36,"line":208},[34,376,377],{"class":44},"      topic\n",[34,379,380],{"class":36,"line":215},[34,381,382],{"class":44},"    }\n",[34,384,385],{"class":36,"line":242},[34,386,283],{"class":44},[34,388,390],{"class":36,"line":389},8,[34,391,357],{"class":44},[10,393,394],{},"use asyncData passing in the destructured app from context",[10,396,397],{},"create a variable called data which awaits the function that we created in our plugin which we have access to using app",[10,399,400],{},"pass in the query which will print our query",[10,402,403],{},"return our data",[10,405,406],{},[31,407,295],{},[24,409,411],{"className":71,"code":410,"language":73,"meta":29,"style":29},"async asyncData({ app }) {\n    const { data } = await app.$hasura({\n      query: print(QUERY)\n    })\n    return {\n      workshops: data.workshops\n    }\n  },\n",[31,412,413,424,452,468,473,480,485,489],{"__ignoreMap":29},[34,414,415,418,421],{"class":36,"line":37},[34,416,417],{"class":84},"async ",[34,419,420],{"class":40},"asyncData",[34,422,423],{"class":84},"({ app }) {\n",[34,425,426,429,432,435,438,441,444,447,450],{"class":36,"line":51},[34,427,428],{"class":91},"    const",[34,430,431],{"class":84}," { ",[34,433,434],{"class":80},"data",[34,436,437],{"class":84}," } ",[34,439,440],{"class":91},"=",[34,442,443],{"class":91}," await",[34,445,446],{"class":84}," app.",[34,448,449],{"class":40},"$hasura",[34,451,191],{"class":84},[34,453,454,457,460,462,465],{"class":36,"line":57},[34,455,456],{"class":84},"      query: ",[34,458,459],{"class":40},"print",[34,461,221],{"class":84},[34,463,464],{"class":80},"QUERY",[34,466,467],{"class":84},")\n",[34,469,470],{"class":36,"line":202},[34,471,472],{"class":84},"    })\n",[34,474,475,478],{"class":36,"line":208},[34,476,477],{"class":91},"    return",[34,479,95],{"class":84},[34,481,482],{"class":36,"line":215},[34,483,484],{"class":84},"      workshops: data.workshops\n",[34,486,487],{"class":36,"line":242},[34,488,382],{"class":84},[34,490,491],{"class":36,"line":389},[34,492,493],{"class":84},"  },\n",[10,495,496],{},"use our data in the template",[10,498,499],{},[31,500,295],{},[24,502,504],{"className":71,"code":503,"language":73,"meta":29,"style":29},"\u003Cul v-for=\"(workshop, index) in workshops\" :key=\"index\">\n    \u003Cli>{{workshop.name}}: {{workshop.topic}}\u003C/li>\n\u003C/ul>\n",[31,505,506,527,538],{"__ignoreMap":29},[34,507,508,511,515,518,520,523],{"class":36,"line":37},[34,509,510],{"class":84},"\u003C",[34,512,514],{"class":513},"s9eBZ","ul",[34,516,517],{"class":40}," v-for",[34,519,440],{"class":91},[34,521,522],{"class":44},"\"(workshop, index) in workshops\"",[34,524,526],{"class":525},"s7hpK"," :key=\"index\">\n",[34,528,529,532,535],{"class":36,"line":51},[34,530,531],{"class":525},"    \u003Cli>{{workshop.name}}:",[34,533,534],{"class":84}," {{workshop.topic}}",[34,536,537],{"class":525},"\u003C/li>\n",[34,539,540],{"class":36,"line":57},[34,541,542],{"class":525},"\u003C/ul>\n",[544,545,546],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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":29,"searchDepth":51,"depth":51,"links":548},[],null,"2020-07-17","md",false,"photo-1516979187457-637abb4f9353?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop",{},"/blog/nuxt-fetching-graphql-queries","imgix",{"title":5,"description":5},"blog/nuxt-fetching-graphql-queries",[560],"nuxt","ybN9vIJ3CBQ37RSVGMt-6oi3AJbpSLsKmjfm-uYcp_c",[563,567],{"title":564,"path":565,"stem":566,"children":-1},"Setting up cypress","/blog/cypress-setup","blog/cypress-setup",{"title":568,"path":569,"stem":570,"children":-1},"Migrating to Nuxt content","/blog/nuxt-migrating-to-nuxt-content","blog/nuxt-migrating-to-nuxt-content",1790839748162]