How to connect your GraphQL API to your VueJS Frontend

Creating a Vue project

vue create harry-potter-app
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"><link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css"><link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
yarn serve
npm run serve

Movie list component

Movie detail component

Add movie component

Connecting to GraphQL API

npm install apollo-client apollo-cache-inmemory apollo-link-http graphql-tag graphql --save
yarn add vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag

Fetch actual data from GraphQL API

What now?

Join the community

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store