Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update API/generate, add Russian #733

Closed
wants to merge 1 commit into from
Closed

Update API/generate, add Russian #733

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
68 changes: 27 additions & 41 deletions de/api/configuration-generate.md
View file
Open in desktop
@@ -1,5 +1,5 @@
---
title: "API: The generate Property"
title: 'API: The generate Property'
description: Configure the generation of your universal web application to a static web application.
---

Expand Down Expand Up @@ -30,7 +30,7 @@ The path to the SPA fallback. This file can be used when doing deploys of genera
- Type: `Number`
- Default: `0`

Interval between 2 render to avoid flooding the API calls made to a potential API from the web application.
Interval between two render cycles to avoid flooding a potential API with API calls from the web application.

## minify

Expand Down Expand Up @@ -60,7 +60,7 @@ minify: {
}
```

You can change the default configuration of [html-minifier](https://github.com/kangax/html-minifier) used by Nuxt.js to minify HTML files created during generate process.
You can change the default configuration of [html-minifier](https://github.com/kangax/html-minifier) used by Nuxt.js to minify HTML files created during generation.

## routes

Expand All @@ -86,11 +86,7 @@ We add routes for `/users/:id` in `nuxt.config.js`:
```js
module.exports = {
generate: {
routes: [
'/users/1',
'/users/2',
'/users/3'
]
routes: ['/users/1', '/users/2', '/users/3']
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this makes it clearer

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was Prettier that did this, actually. Seemed more than short enough not to split.
I split the french because it uses /utilisateurs/ instead of /users/ which imo is a bit much. Maybe the examples should be monolingual, so that if we later have a translation build process they can be imported from one place.

}
}
```
Expand Down Expand Up @@ -126,14 +122,10 @@ const axios = require('axios')

module.exports = {
generate: {
routes: function () {
return axios.get('https://my-api/users')
.then((res) => {
return res.data.map((user) => {
return '/users/' + user.id
})
})
}
routes: () =>
axios
.get('https://my-api/users')
.then(res => res.data.map(user => '/users/' + user.id))
}
}
```
Expand All @@ -147,23 +139,21 @@ const axios = require('axios')

module.exports = {
generate: {
routes: function (callback) {
axios.get('https://my-api/users')
.then((res) => {
var routes = res.data.map((user) => {
return '/users/' + user.id
routes: callback =>
axios
.get('https://my-api/users')
.then(res => {
const routes = res.data.map(user => '/users/' + user.id)
callback(null, routes)
})
callback(null, routes)
})
.catch(callback)
}
.catch(callback)
}
}
```

### Speeding up dynamic route generation with `payload`

In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that with by modifying the code above to this:
In the example above, we're using the `user.id` from the server to generate the routes but tossing out the rest of the data. Typically, we need to fetch it again from inside the `/users/_id.vue`. While we can do that, we'll probably need to set the `generate.interval` to something like `100` in order not to flood the server with calls. Because this will increase the run time of the generate script, it would be preferable to pass along the entire `user` object to the context in `_id.vue`. We do that by modifying the code above to this:

`nuxt.config.js`

Expand All @@ -172,28 +162,24 @@ const axios = require('axios')

module.exports = {
generate: {
routes: function () {
return axios.get('https://my-api/users')
.then((res) => {
return res.data.map((user) => {
return {
route: '/users/' + user.id,
payload: user
}
})
})
}
routes: () =>
axios.get('https://my-api/users').then(res =>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

return statement missing

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What, where?

res.data.map(user => ({
route: '/users/' + user.id,
payload: user
}))
)
}
}
```

Now we can access the `payload` from `/users/_id.vue` like so:

```js
async asyncData ({ params, error, payload }) {
if (payload) return { user: payload }
else return { user: await backend.fetchUser(params.id) }
}
asyncData: async ({ params, error, payload }) =>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While it might be optimised, I don't think it's a good idea for documentation since it makes it harder to read for a human :)

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. I like to think that it's more clear that the function doesn't rely on this when it's an arrow.
  2. If I put it as method syntax, I'd have to have a return statement, which dilutes the actual logic of the 2 paths.
  3. Clearly, I am sane and even conservative, since I had the sense to see the current solution is more readable to a novice dev than: 
    asyncData: async ({ params, error, payload }) => ({
  user: payload || (await backend.fetchUser(params.id))
})

and stopped at that.

That said, I'm open to change this and go through all the files substituting it, just tell me which specific operator you dislike here.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would like @manniL opinion on this particular comment

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@manniL it has come a full circle UwU

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd go for something like

async asyncData ({ params, error, payload }) {
  if (payload) {
    return { user: payload }
  }
  const user = await backend.fetchUser(params.id)
  return { user }
}

Not all readers know ES6 and short circuits very well, so I'd favor a "more readable" /simple version

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oke, will do.
How do you feel about the original version:

async asyncData ({ params, error, payload }) {
  if (payload) return { user: payload }
  else return { user: await backend.fetchUser(params.id) }
}

i'd just change it to arrow notation since this isn't in use, and remove the unnecessary else

asyncData: async ({ params, error, payload }) => {
  if (payload) return { user: payload }
  return { user: await backend.fetchUser(params.id) }
}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@qm3ster I don't like "inline ifs" actually. Was a fan of them years ago but now I appreciate the extra braces for readability.

This is also aligns with our eslint config.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gotcha, will do like yours. Should the await also be on a separate line?
whispers: multiline ifs are a code smell, pull them out into a named function

payload
? { user: payload }
: { user: await backend.fetchUser(params.id) }
```

## subFolders
Expand Down
62 changes: 24 additions & 38 deletions en/api/configuration-generate.md
View file
Open in desktop
@@ -1,5 +1,5 @@
---
title: "API: The generate Property"
title: 'API: The generate Property'
description: Configure the generation of your universal web application to a static web application.
---

Expand Down Expand Up @@ -86,11 +86,7 @@ We add routes for `/users/:id` in `nuxt.config.js`:
```js
module.exports = {
generate: {
routes: [
'/users/1',
'/users/2',
'/users/3'
]
routes: ['/users/1', '/users/2', '/users/3']
}
}
```
Expand Down Expand Up @@ -126,14 +122,10 @@ const axios = require('axios')

module.exports = {
generate: {
routes: function () {
return axios.get('https://my-api/users')
.then((res) => {
return res.data.map((user) => {
return '/users/' + user.id
})
})
}
routes: () =>
axios
.get('https://my-api/users')
.then(res => res.data.map(user => '/users/' + user.id))
}
}
```
Expand All @@ -147,16 +139,14 @@ const axios = require('axios')

module.exports = {
generate: {
routes: function (callback) {
axios.get('https://my-api/users')
.then((res) => {
var routes = res.data.map((user) => {
return '/users/' + user.id
routes: callback =>
Copy link
Author

@qm3ster qm3ster Jan 29, 2019 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually @manniL I now see that this may be confusing, because it does call the callback, but also returns a Promise which resolves after the callback returns.
Would putting void axios.get be too arcane?
Should I just put the statement of the routes function into a {} block so that it returns undefined?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if we want to keep a callback example for the routes function at all.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's fine by me. 😩 👌
So I nuke it?
From all languages?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd say so

axios
.get('https://my-api/users')
.then(res => {
const routes = res.data.map(user => '/users/' + user.id)
callback(null, routes)
})
callback(null, routes)
})
.catch(callback)
}
.catch(callback)
}
}
```
Expand All @@ -172,28 +162,24 @@ const axios = require('axios')

module.exports = {
generate: {
routes: function () {
return axios.get('https://my-api/users')
.then((res) => {
return res.data.map((user) => {
return {
route: '/users/' + user.id,
payload: user
}
})
})
}
routes: () =>
axios.get('https://my-api/users').then(res =>
res.data.map(user => ({
route: '/users/' + user.id,
payload: user
}))
)
}
}
```

Now we can access the `payload` from `/users/_id.vue` like so:

```js
async asyncData ({ params, error, payload }) {
if (payload) return { user: payload }
else return { user: await backend.fetchUser(params.id) }
}
asyncData: async ({ params, error, payload }) =>
payload
? { user: payload }
: { user: await backend.fetchUser(params.id) }
```

## subFolders
Expand Down