Add Nuxt + Apollo example

This commit is contained in:
Charlie Hield 2017-04-11 13:15:31 -05:00
parent fe6b08d0fd
commit ef5ebd0417
6 changed files with 199 additions and 0 deletions

View File

@ -0,0 +1,29 @@
# nuxt-with-apollo
> Nuxt.js with Apollo (GraphQL client)
[DEMO](https://nuxt-apollo.now.sh/)
## About
This project uses [Apollo](http://www.apollodata.com/) as a GraphQL client and [Graphcool](https://www.graph.cool/) as a hosted GraphQL backend.
## Getting Started
Download this example [or clone the repo](https://github.com/nuxt/nuxt.js):
```bash
curl https://codeload.github.com/nuxt/nuxt.js/tar.gz/master | tar -xz --strip=2 nuxt.js-master/examples/with-apollo
cd with-apollo
```
Install and run:
```bash
npm install
npm run dev
# or with Yarn
yarn
yarn dev
```

View File

@ -0,0 +1,19 @@
<template>
<div>
<h1 @click="$router.push('/')">Nuxt.js + Apollo</h1>
<nuxt/>
</div>
</template>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
padding: 30px;
}
h1 {
cursor: pointer;
}
</style>

View File

@ -0,0 +1,24 @@
{
"name": "nuxt-apollo",
"version": "1.0.0",
"description": "Nuxt.js with Apollo",
"author": "Charlie Hield",
"license": "MIT",
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
},
"keywords": [
"nuxt",
"vue",
"apollo",
"graphql"
],
"dependencies": {
"apollo-client": "^1.0.2",
"graphql-tag": "^2.0.0",
"isomorphic-fetch": "^2.2.1",
"nuxt": "^0.10.5"
}
}

View File

@ -0,0 +1,53 @@
<template>
<div>
<h3>{{ car.make }} {{ car.model }}</h3>
<p>{{ formatCurrency(car.price) }}</p>
<img :src="car.photoURL" :alt="`${car.model} photo`">
</div>
</template>
<script>
import client from '~plugins/apollo'
import gql from 'graphql-tag'
export default {
async asyncData({ params }) {
let { data } = await client.query({
query: gql`
query {
Car(id: "${params.id}") {
make
model
photoURL
price
}
}
`
})
return {
car: data.Car
}
},
methods: {
formatCurrency(num) {
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 2
})
return formatter.format(num)
}
}
}
</script>
<style>
img {
max-width: 600px;
}
</style>

View File

@ -0,0 +1,59 @@
<template>
<div>
<h3>Cars</h3>
<ul>
<li v-for="car in cars">
<nuxt-link :to="`car/${car.id}`">
{{ car.year }} {{ car.make }} {{ car.model }}
</nuxt-link>
</li>
</ul>
</div>
</template>
<script>
import client from '~plugins/apollo'
import gql from 'graphql-tag'
export default {
async asyncData() {
let { data } = await client.query({
query: gql`
query {
allCars {
id
make
model
year
}
}
`
})
return {
cars: data.allCars
}
}
}
</script>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
line-height: 1.6;
}
a {
text-decoration: none;
color: #3498DB;
}
a:hover {
border-bottom: 1px solid;
}
</style>

View File

@ -0,0 +1,15 @@
import Vue from 'vue'
import { ApolloClient, createNetworkInterface } from 'apollo-client'
import 'isomorphic-fetch'
// Created with Graphcool - https://www.graph.cool/
const API_ENDPOINT = 'https://api.graph.cool/simple/v1/cj1dqiyvqqnmj0113yuqamkuu'
const apolloClient = new ApolloClient({
networkInterface: createNetworkInterface({
uri: API_ENDPOINT,
transportBatching: true
})
})
export default apolloClient