feat(vue-app): universal fetch (#5028)

* pkg(nuxt-start): add node-fetch, unfetch

* pkg(vue-app): add node-fetch, unfetch

* add yarn.lock

* feat(config): _app.fetch options

* feat(builder): add fetch to templateVars

* feat(vue-app): polyfill global with fetch

* feat(fixtures/basic): /api/test

* add fetch example to fixtures

* remove unfetch from nuxt-start

* update template snapshot

* revert extra new line in server.js

* single line if
This commit is contained in:
Pooya Parsa 2019-02-14 19:26:58 +03:30 committed by Sébastien Chopin
parent d9a0b5f61b
commit 2015140d12
12 changed files with 73 additions and 0 deletions

View File

@ -54,6 +54,7 @@
"dependencies": { "dependencies": {
"@nuxt/cli": "2.4.3", "@nuxt/cli": "2.4.3",
"@nuxt/core": "2.4.3", "@nuxt/core": "2.4.3",
"node-fetch": "^2.3.0",
"vue": "^2.6.6", "vue": "^2.6.6",
"vue-meta": "^1.5.8", "vue-meta": "^1.5.8",
"vue-no-ssr": "^1.1.1", "vue-no-ssr": "^1.1.1",

View File

@ -21,6 +21,7 @@ export default class TemplateContext {
isTest: options.test, isTest: options.test,
debug: options.debug, debug: options.debug,
vue: { config: options.vue.config }, vue: { config: options.vue.config },
fetch: options.fetch,
mode: options.mode, mode: options.mode,
router: options.router, router: options.router,
env: options.env, env: options.env,

View File

@ -19,6 +19,7 @@ TemplateContext {
], ],
"env": "test_env", "env": "test_env",
"extensions": "test|ext", "extensions": "test|ext",
"fetch": undefined,
"globalName": "test_global", "globalName": "test_global",
"globals": Array [ "globals": Array [
"globals", "globals",

View File

@ -13,6 +13,11 @@ export default () => ({
script: [] script: []
}, },
fetch: {
server: true,
client: true
},
plugins: [], plugins: [],
css: [], css: [],

View File

@ -156,6 +156,10 @@ Object {
"mjs", "mjs",
"ts", "ts",
], ],
"fetch": Object {
"client": true,
"server": true,
},
"generate": Object { "generate": Object {
"concurrency": 500, "concurrency": 500,
"dir": "/var/nuxt/test/dist", "dir": "/var/nuxt/test/dist",

View File

@ -142,6 +142,10 @@ Object {
"editor": undefined, "editor": undefined,
"env": Object {}, "env": Object {},
"extensions": Array [], "extensions": Array [],
"fetch": Object {
"client": true,
"server": true,
},
"generate": Object { "generate": Object {
"concurrency": 500, "concurrency": 500,
"dir": "dist", "dir": "dist",
@ -466,6 +470,10 @@ Object {
"editor": undefined, "editor": undefined,
"env": Object {}, "env": Object {},
"extensions": Array [], "extensions": Array [],
"fetch": Object {
"client": true,
"server": true,
},
"generate": Object { "generate": Object {
"concurrency": 500, "concurrency": 500,
"dir": "dist", "dir": "dist",

View File

@ -12,6 +12,8 @@
"main": "dist/vue-app.js", "main": "dist/vue-app.js",
"typings": "types/index.d.ts", "typings": "types/index.d.ts",
"dependencies": { "dependencies": {
"node-fetch": "^2.3.0",
"unfetch": "^4.0.1",
"vue": "^2.6.6", "vue": "^2.6.6",
"vue-meta": "^1.5.8", "vue-meta": "^1.5.8",
"vue-no-ssr": "^1.1.1", "vue-no-ssr": "^1.1.1",

View File

@ -1,4 +1,5 @@
import Vue from 'vue' import Vue from 'vue'
<% if (fetch.client) { %>import fetch from 'unfetch'<% } %>
import middleware from './middleware.js' import middleware from './middleware.js'
import { import {
applyAsyncData, applyAsyncData,
@ -22,6 +23,8 @@ import NuxtLink from './components/nuxt-link.<%= router.prefetchLinks ? "client"
Vue.component(NuxtLink.name, NuxtLink) Vue.component(NuxtLink.name, NuxtLink)
Vue.component('NLink', NuxtLink) Vue.component('NLink', NuxtLink)
<% if (fetch.client) { %>if (!global.fetch) { global.fetch = fetch }<% } %>
// Global shared references // Global shared references
let _lastPaths = [] let _lastPaths = []
let app let app

View File

@ -1,5 +1,6 @@
import { stringify } from 'querystring' import { stringify } from 'querystring'
import Vue from 'vue' import Vue from 'vue'
<% if (fetch.server) { %>import fetch from 'node-fetch'<% } %>
import middleware from './middleware.js' import middleware from './middleware.js'
import { applyAsyncData, getMatchedComponents, middlewareSeries, promisify, urlJoin, sanitizeComponent } from './utils.js' import { applyAsyncData, getMatchedComponents, middlewareSeries, promisify, urlJoin, sanitizeComponent } from './utils.js'
import { createApp, NuxtError } from './index.js' import { createApp, NuxtError } from './index.js'
@ -9,6 +10,8 @@ import NuxtLink from './components/nuxt-link.server.js' // should be included af
Vue.component(NuxtLink.name, NuxtLink) Vue.component(NuxtLink.name, NuxtLink)
Vue.component('NLink', NuxtLink) Vue.component('NLink', NuxtLink)
<% if (fetch.server) { %>if (!global.fetch) { global.fetch = fetch }<% } %>
const debug = require('debug')('nuxt:render') const debug = require('debug')('nuxt:render')
debug.color = 4 // force blue color debug.color = 4 // force blue color

View File

@ -69,6 +69,12 @@ export default {
'~/plugins/dir-plugin', '~/plugins/dir-plugin',
'~/plugins/inject' '~/plugins/inject'
], ],
serverMiddleware: [
{
path: '/api/test',
handler: (_, res) => res.end('Works!')
}
],
build: { build: {
scopeHoisting: true, scopeHoisting: true,
publicPath: '', publicPath: '',

34
test/fixtures/basic/pages/fetch.vue vendored Normal file
View File

@ -0,0 +1,34 @@
<template>
<div>
{{ data }}
<button @click="update">
Fetch
</button>
<button @click="reload">
Reload
</button>
</div>
</template>
<script>
const name = process.server ? 'server' : 'client'
const baseURL = 'http://localhost:3000/api'
const getData = () => fetch(`${baseURL}/test`)
.then(r => r.text())
.then(r => r + ` (From ${name})`)
export default {
async asyncData() {
const data = await getData()
return { data }
},
methods: {
async update() {
this.data = await getData()
},
reload() {
window.location.reload()
}
}
}
</script>

View File

@ -11023,6 +11023,11 @@ umask@^1.1.0:
resolved "https://registry.npmjs.org/umask/-/umask-1.1.0.tgz#f29cebf01df517912bb58ff9c4e50fde8e33320d" resolved "https://registry.npmjs.org/umask/-/umask-1.1.0.tgz#f29cebf01df517912bb58ff9c4e50fde8e33320d"
integrity sha1-8pzr8B31F5ErtY/5xOUP3o4zMg0= integrity sha1-8pzr8B31F5ErtY/5xOUP3o4zMg0=
unfetch@^4.0.1:
version "4.0.1"
resolved "https://registry.npmjs.org/unfetch/-/unfetch-4.0.1.tgz#8750c4c7497ade75d40387d7dbc4ba024416b8f6"
integrity sha512-HzDM9NgldcRvHVDb/O9vKoUszVij30Yw5ePjOZJig8nF/YisG7QN/9CBXZ8dsHLouXMeLZ82r+Jod9M2wFkEbQ==
unicode-canonical-property-names-ecmascript@^1.0.4: unicode-canonical-property-names-ecmascript@^1.0.4:
version "1.0.4" version "1.0.4"
resolved "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818" resolved "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"