Composition-api: fix: useAsync in ssr site doesn't reliably fetch content

[Dan503]

🐛 The bug
useAsync in a server side rendered site doesn't reliably fetch content.

🛠️ To reproduce
Steps to reproduce the behavior:

Clone this repository: https://github.com/Dan503/Stuart-McMillen-website/tree/useAsync-bug

Note: If you look at pages/index.vue you will see that a series of posts should get rendered at the bottom of the page.

.posts
    article.posts(v-for="post in posts")
        h3 {{post.title.rendered}}
        div(v-html="post.excerpt.rendered")

1. Run npm run start
2. Open http://localhost:3000/

Notice that the posts are not getting rendered onto the page.

If they _are_ getting rendered, then refresh the page using the browser refresh button. The posts should now definitely not be visible.

You can sometimes get the posts to display by triggering recompile by editing a file.

🌈 Expected behaviour

Well firstly I was expecting useAsync to pre-fill the content on the server side if I'm server side rendering.

If that's not an option, then I would at least want the content to reliably load every time the page is loaded.

ℹ️ Additional context

I can only make this repository public for a limited time. Please let me know when it is safe for me to make it private again.

[danielroe]

@Dan503 I have cloned the repo and you can make it private again now. I'll have a look.

[mathe42]

Just did the same :O...

The problem is that your useAsync method returns a Promise of a Promise (res.json() returns a promise)

Changing your code to

                const posts = useAsync(async () => {
            const res = await fetch(
                'https://css-tricks.com/wp-json/wp/v2/posts?page=1&per_page=20&_embed=1',
            )
            return res.json()
        })

fixes ist.

I will look into it if I can change useAsync to work with your example...

[Dan503]

Thanks,

I based the code I wrote off the documentation written here:

https://composition-api.now.sh/useAsync

const posts = useAsync(() => axios.get('/api/posts'))

I just adjusted it to use the normal fetch API instead

const posts = useAsync(() =>
    fetch(
        'https://css-tricks.com/wp-json/wp/v2/posts?page=1&per_page=20&_embed=1',
    ).then((res) => res.json()),
)

Should the documentation be updated?

[Dan503]

Also, I'm having issues running the site on localhost in Firefox, is that a known issue?

Thankfully it seems to run ok in Firefox in production mode so it isn't a major issue.

[danielroe]

@Dan503 I use FF in dev with no issues.

[nvitaterna]

This may be related to #210. useAsync checks for instanceof Promise. I did a quick check:

const x = axios.get('/')
console.log(x instanceof Promise) // false

const x = fetch('/');
console.log(x instanceof Promse) // true

[danielroe]

@Dan503 Would you see if your issue persists with v0.12.2, or whether it's now solved?

[Dan503]

If i remember, I'll test it out tomorrow night

[Dan503]

@danielroe I tried running npm i [email protected] but it says that the version doesn't exist on npm.

Did you publish it?

$ npm i [email protected]

npm ERR! code ETARGET
npm ERR! notarget No matching version found for [email protected].
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

[mathe42]

Package name changed to @nuxtjs/composition-api

[Dan503]

ok yep, after uninstalling nuxt-composition-api and then installing @nuxtjs/composition-api and replacing references to the old name with the new name, useAsync() appears to work as expected when using the native fetch() API.

I also don't seem to be having the issues in FF that I was having before. I'll close this issue as fixed. 😃