docs: Add example for Apollo GraphQL + composition API

[agualis]

Updates the existing Graphql example to make it compatible with Vue 3 + @vue/apollo-composable.

The example needs a temporary patch until a pending PR is merged in vue-apollo project. That's why we have to use specific "@vue/apollo-composable": "4.0.0-alpha.10" version for now.

Implementation detail:

I had to create a wrapper component ComponentWithInjectedApollo to globally provide apollo client in the test. I would prefer not to do it and use some VTU option to call global.provide but I didn't find that option 🤷 Maybe you know how to do it.

Bonus: I could add an additional test to check what happens when the Graphql request returns an error (It would involve adding some kind of error handling to the VueApollo.vue component).

[agualis]

Oops. Some tests are failing with newMapConsumer.eachMapping is not a function. First time I see this kind of error. I will wait to see if you have an explanation before starting investigating.

[afontcu]

Hi, thanks for this!! 🎉 this is great, it was one of the missing pieces to make sure VTL can support Vue 3, and I'm not experienced enough when it comes to vue apollo to make it work.

I would prefer not to do it and use some VTU option to call global.provide but I didn't find that option

It does exist: https://vue-test-utils.vuejs.org/v2/api/#global-provide

[agualis]

It does exist: https://vue-test-utils.vuejs.org/v2/api/#global-provide

I actually tried that but it didn't work. Maybe you can help to understand why...

[agualis]

it was one of the missing pieces to make sure VTL can support Vue 3

Happy if I can help with something else 😊

[afontcu]

It does exist: https://vue-test-utils.vuejs.org/v2/api/#global-provide

I actually tried that but it didn't work. Maybe you can help to understand why...

Sure! Can you share what failed? I'm also on the VTU team so I can run the issue internally if needed 👍

[agualis]

Sure! Can you share what failed? I'm also on the VTU team so I can run the issue internally if needed 👍

If, instead of using ComponentWithInjectedApollo, you just render the Component like this:

  render(Component, {
      props: {id: '1'},
      global: {
        provide: {
          DefaultApolloClient: apolloClient,
        }
      }
  })

the apollo client won't be injected and you'll get this error when running the test:

Apollo Client with id default not found

[heywhy]

Sure! Can you share what failed? I'm also on the VTU team so I can run the issue internally if needed 👍

If, instead of using ComponentWithInjectedApollo, you just render the Component like this:

  render(Component, {
      props: {id: '1'},
      global: {
        provide: {
          DefaultApolloClient: apolloClient,
        }
      }
  })

the apollo client won't be injected and you'll get this error when running the test:

Apollo Client with id default not found

You should have something like this 👇 instead:

import { DefaultApolloClient } from '@vue/apollo-composable'

...

render(Component, {
  props: {id: '1'},
  global: {
    provide: {
      [DefaultApolloClient]: apolloClient,
    }
  }
})

NB: I can prepare another PR if needed.

[heywhy]

@agualis @afontcu You should refer to this Vue 3 Project Template for proper testing infrastructure support using @testing-library/vue. And you can clone the repo to start your own project 😄 . Though, I will love your feedbacks.

[agualis]

You should have something like this 👇 instead:

Oh. I missed that I needed square brackets because DefaultApolloClient is a symbol. Than you very much atanda!

Vue 3 Project Template

I looks good. Thanks for sharing.

[afontcu]

Looks like we have some CI issues 🤔 I ran tests locally and got the following error:

[agualis]

Defined is not defined. To be or not to be 😅

Which node version are you using? yarn or npm?

[agualis]

I recall that I had to use a fixed apollo-composable version because I was having the same error (and we're not alone):

https://github.com/vuejs/vue-apollo/issues/1085

I'll try to reproduce it in another machine. It's funny that we are also having a different error in GHA CI 😅 (bug fragmentation 🤣 ).

[heywhy]

@agualis I will like you to invite me to the repository you are working on because I'm able to resolve the failing tests and I don't want to create a separate PR for this project or for your fork. see loom recording below:

https://www.loom.com/share/abf53aaedce448d89564afc22c1ebfcf

cc: @afontcu

[agualis]

I will like you to invite me to the repository you are working on

I'm not sure if I'm following you @heywhy I don't have another project, just the fork.

[heywhy]

I will like you to invite me to the repository you are working on

I'm not sure if I'm following you @heywhy I don't have another project, just the fork.

I don't want to create another fork of this project instead I want to push the changes directly to your own fork because I made the fixes on your fork but I don't have access to your fork so I can't push the changes. I hope that's clear

[afontcu]

Looks like this PR contains changes that are already there in next. Can you make sure you check out from latest next changes? 🤗

[heywhy]

@afontcu I don't understand why the CI fails, can you help delete the cache for this PR workflow

[codecov[bot]]

Codecov Report

Merging #192 (aabe84c) into next (49208ef) will not change coverage. The diff coverage is n/a.

@@            Coverage Diff            @@
##              next      #192   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            1         1           
  Lines           91        91           
  Branches        30        30           
=========================================
  Hits            91        91           

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 49208ef...aabe84c. Read the comment docs.

[heywhy]

@agualis can you explain what went wrong??

[agualis]

Finally ready to merge 🎊 . It seems that apollo+vueecosystem is very active right now and this affected our PR.

@heywhy I enabled CI in my fork and I discovered that version 3.2.2 of apollo client was the one affecting our tests 😕 I didn't investigate the root cause but updating to the last stable one (3.3.6) fixed the problem.

@afontcu will keep an eye on this topic because apollo related dependencies will be fixed soon and we will be able to get rid of the nasty postinstall patch.

Thanks both for your patience and help 🙏

[afontcu]

Looks great :) Thank you for this!

[github-actions[bot]]

:tada: This PR is included in version 6.3.2 :tada:

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: