How to connect your GraphQL API to your VueJS Frontend

Creating a Vue project

vue create harry-potter-app
<link rel="stylesheet" href="//,300italic,700,700italic"><link rel="stylesheet" href="//"><link rel="stylesheet" href="//">
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