Skip to content
This repository has been archived by the owner on Dec 5, 2024. It is now read-only.

fix: useFetch not returning fetch and fetchState on SSR #141

Closed
toddheslin opened this issue Jul 3, 2020 · 1 comment
Closed

fix: useFetch not returning fetch and fetchState on SSR #141

toddheslin opened this issue Jul 3, 2020 · 1 comment
Assignees
Labels
bug Something isn't working

Comments

@toddheslin
Copy link

🐛 The bug
OK this might be intentional but it might be worth a discussion

I was previously using 0.9.3 and had a composition function that looked like this:

const { fetch, fetchState } = useFetch(async () => {
    data.value = await hasura
      .query({ query: query.query })
      .then(select(query.returning))
  })

After upgrading to 0.10.3 I found that on server rendering useFetch() was returning undefined and therefore my destructuring would throw and error. However, all would be OK when mounting the component on the client side only.

Given that the docs use the example:

const { fetch, fetchState } = useFetch(async () => {
      name.value = await axios.get('https://myapi.com/name')
})

I'm wondering if this is intentional, or a regression.

🛠️ To reproduce
Use the example useFetch() in the docs using 0.10.3 and check if error 'Can not structured from undefined` shows on server render.

🌈 Expected behaviour
useFetch() always returns and object with fetch and fetchState properties, on both client and server.

ℹ️ Additional context
I am using this inside a separate file, I don't think this matters but will detail below:

index.vue

<script>
import { defineComponent, ref } from 'nuxt-composition-api'
import { useQuery, ALL_LOUNGES } from '@/data'

export default defineComponent({
  layout: 'collection',
  setup() {
    const activeTab = ref('London Heathrow')

    const { lounges, fetch, fetchState } = useQuery(ALL_LOUNGES)

    return { lounges, activeTab }
  },
})
</script>

@/data

// imports and some utility functions above
function useQuery(query) {
  const { app } = useContext()
  const hasura = app.apolloProvider.defaultClient

  const data = ssrRef(false)

  const { fetch, fetchState } = useFetch(async () => {
    data.value = await hasura
      .query({ query: query.query })
      .then(select(query.returning))
  })

  return { fetch, fetchState, [query.returning]: data }
}

export { useQuery }
@toddheslin toddheslin added the bug Something isn't working label Jul 3, 2020
@danielroe
Copy link
Member

@toddheslin This should be fixed in 0.10.4. Apologies for the regression!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants