mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-13 09:33:54 +00:00
Update example to use nuxt module for apollo
This commit is contained in:
parent
2091699e43
commit
50355bb234
@ -1,7 +1,5 @@
|
|||||||
# WIP
|
|
||||||
|
|
||||||
# Vue-Apollo with Nuxt.js
|
# Vue-Apollo with Nuxt.js
|
||||||
|
|
||||||
https://nuxtjs.org/examples/vue-apollo
|
https://github.com/nuxt-community/apollo-module
|
||||||
|
|
||||||
https://github.com/Akryum/vue-apollo
|
https://github.com/Akryum/vue-apollo
|
||||||
|
@ -1,7 +0,0 @@
|
|||||||
export default async function ({ isServer, apolloProvider }) {
|
|
||||||
if (isServer) {
|
|
||||||
const ensureReady = apolloProvider.collect()
|
|
||||||
console.log('Call ensureReady!', ensureReady())
|
|
||||||
await ensureReady()
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,12 +1,8 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
build: {
|
modules: ['@nuxtjs/apollo'],
|
||||||
vendor: ['vue-apollo', 'apollo-client']
|
apollo: {
|
||||||
},
|
clients: {
|
||||||
router: {
|
default: 'https://api.graph.cool/simple/v1/cj1dqiyvqqnmj0113yuqamkuu'
|
||||||
middleware: 'apollo'
|
}
|
||||||
},
|
}
|
||||||
plugins: [
|
|
||||||
// Will inject the plugin in the $root app and also in the context as `apolloProvider`
|
|
||||||
{ src: '~plugins/apollo.js', injectAs: 'apolloProvider' }
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
@ -1,13 +1,13 @@
|
|||||||
{
|
{
|
||||||
"name": "nuxt-i18n",
|
"name": "nuxt-vue-apollo",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"apollo-client": "^1.0.3",
|
"apollo-client": "^1.9.0-1",
|
||||||
"nuxt": "latest",
|
"nuxt": "latest",
|
||||||
"vue-apollo": "^2.1.0-beta.2"
|
"vue-apollo": "^2.1.0-beta.19"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "node server.js",
|
"dev": "nuxt",
|
||||||
"build": "nuxt build",
|
"build": "nuxt build",
|
||||||
"start": "cross-env NODE_ENV=production node server.js"
|
"start": "nuxt start"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
41
examples/vue-apollo/pages/car/_id.vue
Normal file
41
examples/vue-apollo/pages/car/_id.vue
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<template>
|
||||||
|
<div v-if="Car">
|
||||||
|
<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 car from '~/queries/car'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
apollo: {
|
||||||
|
Car: {
|
||||||
|
query: car,
|
||||||
|
prefetch: ({ route }) => ({ id: route.params.id }),
|
||||||
|
variables() {
|
||||||
|
return { id: this.$route.params.id }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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>
|
@ -12,21 +12,14 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import client from '~plugins/apollo'
|
import allCars from '~/queries/allCars'
|
||||||
import gql from 'graphql-tag'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
apollo: {
|
apollo: {
|
||||||
allCars: gql`
|
allCars: {
|
||||||
query {
|
prefetch: true,
|
||||||
allCars {
|
query: allCars
|
||||||
id
|
}
|
||||||
make
|
|
||||||
model
|
|
||||||
year
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -1,21 +0,0 @@
|
|||||||
import 'babel-polyfill'
|
|
||||||
import Vue from 'vue'
|
|
||||||
import VueApollo from 'vue-apollo'
|
|
||||||
import { ApolloClient, createNetworkInterface } from 'apollo-client'
|
|
||||||
|
|
||||||
Vue.use(VueApollo)
|
|
||||||
|
|
||||||
const API_ENDPOINT = 'https://api.graph.cool/simple/v1/cj1dqiyvqqnmj0113yuqamkuu'
|
|
||||||
|
|
||||||
const apolloClient = new ApolloClient({
|
|
||||||
networkInterface: createNetworkInterface({
|
|
||||||
uri: API_ENDPOINT,
|
|
||||||
transportBatching: true
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
const apolloProvider = new VueApollo({
|
|
||||||
defaultClient: apolloClient
|
|
||||||
})
|
|
||||||
|
|
||||||
export default apolloProvider
|
|
8
examples/vue-apollo/queries/allCars.gql
Normal file
8
examples/vue-apollo/queries/allCars.gql
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
allCars {
|
||||||
|
id
|
||||||
|
make
|
||||||
|
model
|
||||||
|
year
|
||||||
|
}
|
||||||
|
}
|
8
examples/vue-apollo/queries/car.gql
Normal file
8
examples/vue-apollo/queries/car.gql
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
query Car($id: ID!) {
|
||||||
|
Car(id: $id) {
|
||||||
|
make
|
||||||
|
model
|
||||||
|
photoURL
|
||||||
|
price
|
||||||
|
}
|
||||||
|
}
|
@ -1,27 +0,0 @@
|
|||||||
const Nuxt = require('../../')
|
|
||||||
const app = require('express')()
|
|
||||||
const host = process.env.HOST || '127.0.0.1'
|
|
||||||
const port = process.env.PORT || 3000
|
|
||||||
|
|
||||||
global.fetch = require('node-fetch')
|
|
||||||
|
|
||||||
// Import and Set Nuxt.js options
|
|
||||||
let config = require('./nuxt.config.js')
|
|
||||||
config.dev = !(process.env.NODE_ENV === 'production')
|
|
||||||
|
|
||||||
// Init Nuxt.js
|
|
||||||
const nuxt = new Nuxt(config)
|
|
||||||
app.use(nuxt.render)
|
|
||||||
|
|
||||||
// Build only in dev mode
|
|
||||||
if (config.dev) {
|
|
||||||
nuxt.build()
|
|
||||||
.catch((error) => {
|
|
||||||
console.error(error) // eslint-disable-line no-console
|
|
||||||
process.exit(1)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// Listen the server
|
|
||||||
app.listen(port, host)
|
|
||||||
console.log('Server listening on ' + host + ':' + port) // eslint-disable-line no-console
|
|
Loading…
Reference in New Issue
Block a user