mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
Add Nuxt + Apollo example
This commit is contained in:
parent
fe6b08d0fd
commit
ef5ebd0417
29
examples/with-apollo/README.md
Normal file
29
examples/with-apollo/README.md
Normal 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
|
||||
```
|
19
examples/with-apollo/layouts/default.vue
Normal file
19
examples/with-apollo/layouts/default.vue
Normal 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>
|
24
examples/with-apollo/package.json
Normal file
24
examples/with-apollo/package.json
Normal 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"
|
||||
}
|
||||
}
|
53
examples/with-apollo/pages/car/_id.vue
Normal file
53
examples/with-apollo/pages/car/_id.vue
Normal 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>
|
59
examples/with-apollo/pages/index.vue
Normal file
59
examples/with-apollo/pages/index.vue
Normal 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>
|
15
examples/with-apollo/plugins/apollo.js
Normal file
15
examples/with-apollo/plugins/apollo.js
Normal 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
|
Loading…
Reference in New Issue
Block a user