mirror of
https://github.com/nuxt/nuxt.git
synced 2025-01-30 15:22:39 +00:00
Remove with-apollo example, see vue-apollo now
This commit is contained in:
Sebastien Chopin
parent
cf6b0df45f
commit
8c354c085c
@ -1,29 +0,0 @@
|
|||||||
# 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
|
|
||||||
```
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<h3>{{ car.make }} {{ car.model }}</h3>
|
|
||||||
<p>{{ formatCurrency(car.price) }}</p>
|
|
||||||
<img :src="car.photoURL" :alt="`${car.model} photo`">
|
|
||||||
<p><nuxt-link to="/">Home page</nuxt-link></p>
|
|
||||||
</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>
|
|
||||||
@ -1,59 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
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