Useful patterns

[posva]

After #11

I want to add some patterns that I have found useful by showing real examples with comments. Here are some of them:

• Cancelling promises (automatic)
• Fetching new data
  • by setting this.promise
  • by using a computed property that returns the promise
• Using a placeholder
• Using the combined slot (the Search example)
• Testing components using Promised

If you have other suggestions or ways you have used vue-promised that could be useful, please share! 😄

[lcottereau]

I would be interested in an example of testing. Is it for example possible to do shallow testing of a component using <Promise> around the whole template ?

[posva]

If you use shallowMount you would have to provide a mock for it, which could be just import { Promised } from 'vue-promised' (shallow mounting everything but the Promised component.
It's not even worth to do a mock as you can easily wait for a tick in tests when resolving promises to get the right render:

// could also be process.nextTick(r)
const tick = () => new Promise(r => setTimeout(r, 0))

it('test something', async () => {
  wrapper.setData({ promise: Promise.resolve('data') })
  await tick()
  expect(wrapper.text()).toBe('data')
})

[dospunk]

I would love an example of fetching new data using a computed property, I'm working on that now but having some trouble with it. The problem is that whenever I fetch the new data it wipes out the old data before the new is populated.

Edit: I figured it out, so I'll offer up my pattern here for anyone who wants it and for use in the docs if you'd like. This is using the composition API

export default defineComponent({
  setup() {
    //keep the page number in a ref
    const page = ref(1)
    //get the data in a computed so that if the page changes it re-fetches the data
    const myDataPromise = computed(() => {
      return usePromise(fetchMyData(page.value))
    })
    
    //do not actually expose the data from the promise
    const myData = ref(null)
    watch(myDataPromise, (dataPromise) => {
      //instead, update a ref only when the promise has finished fetching
      if(!dataPromise.isPending.value) {
        myData.value = dataPromise.data.value
      }
    }, { deep: true })

    //and expose the ref
    return { myData }
  }
})