diff --git a/examples/with-apollo/README.md b/examples/with-apollo/README.md new file mode 100644 index 0000000000..d4600552fb --- /dev/null +++ b/examples/with-apollo/README.md @@ -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 +``` diff --git a/examples/with-apollo/layouts/default.vue b/examples/with-apollo/layouts/default.vue new file mode 100644 index 0000000000..62147ffc78 --- /dev/null +++ b/examples/with-apollo/layouts/default.vue @@ -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> diff --git a/examples/with-apollo/layouts/error.vue b/examples/with-apollo/layouts/error.vue new file mode 100644 index 0000000000..192163dd31 --- /dev/null +++ b/examples/with-apollo/layouts/error.vue @@ -0,0 +1,13 @@ +<template> + <div class="container"> + <h3 v-if="error.statusCode === 404">Page not found</h3> + <h3 v-else>An error occured</h3> + <nuxt-link to="/">← Home page</nuxt-link> + </div> +</template> + +<script> +export default { + props: ['error'] +} +</script> diff --git a/examples/with-apollo/package.json b/examples/with-apollo/package.json new file mode 100644 index 0000000000..c3bb76f0f4 --- /dev/null +++ b/examples/with-apollo/package.json @@ -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" + } +} diff --git a/examples/with-apollo/pages/car/_id.vue b/examples/with-apollo/pages/car/_id.vue new file mode 100644 index 0000000000..4c6728feb6 --- /dev/null +++ b/examples/with-apollo/pages/car/_id.vue @@ -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> diff --git a/examples/with-apollo/pages/index.vue b/examples/with-apollo/pages/index.vue new file mode 100644 index 0000000000..b8c6a7d7df --- /dev/null +++ b/examples/with-apollo/pages/index.vue @@ -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> diff --git a/examples/with-apollo/plugins/apollo.js b/examples/with-apollo/plugins/apollo.js new file mode 100644 index 0000000000..f328ff1fc7 --- /dev/null +++ b/examples/with-apollo/plugins/apollo.js @@ -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