Composition-api: help: Some problem with useFetch

[namadnuno]

What I'm trying to do?
I was trying to build a composable method where it has the state wrapped within a ref and some methods to get and set a post fetched from an API (https://jsonplaceholder.typicode.com/posts) and use the useFetch method to get the post and render it on the page.

What happens ?
The SSR HTML is ok, but the browser console fires some errors:

*How to reproduce ?
Test it here: https://codesandbox.io/s/runtime-sky-zcg6v

Am I doing something wrong?

Anyway, that's a lot for this package, Congratulations 👌!

[danielroe]

@namadnuno Thanks for the report and kind words :smiley:

The warning is not something to worry about, although suggestions/help are welcome as far as getting rid of it. (I've created #19 to track.)

As far as the mismatch is concerned, fetch() in Nuxt 2.12+ only looks after the component state (which in this context is what is returned from setup()). So this would work:

{
  setup() {
    const post = ref(null)

    async function loadPost() {
      ...
    }

    useFetch(async () => {
      await loadPost();
    })

    return { post }
  }
}

For improved composability (given that a lot of state is stored off-component with the Composition API), I plan to create a ssrRef function that will automatically stringify and rehydrate refs on client-side, independent of component context. #20

[namadnuno]

Thanks a lot for answering 👍, I will keep it into consideration, and will wait until those are implemented!

[danielroe]

@namadnuno Fingers crossed, if you use ssrRef for your state, everything should now work. I'll wait to hear back before closing the issue though.

[namadnuno]

Really cool! It works well! Thank you! 🎉! You can close this issue now!