-
Notifications
You must be signed in to change notification settings - Fork 113
docs: Add example for Apollo GraphQL + composition API #192
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
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.
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
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...
it was one of the missing pieces to make sure VTL can support Vue 3
Happy if I can help with something else 😊
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 👍
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
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 theComponentlike 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.
f4ac8d7 to
49208ef
Compare
@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.
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.
Looks like we have some CI issues 🤔 I ran tests locally and got the following error:
I recall that I had to use a fixed apollo-composable version because I was having the same error (and we're not alone):
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 🤣 ).
@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
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 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
Looks like this PR contains changes that are already there in next. Can you make sure you check out from latest next changes? 🤗
@afontcu I don't understand why the CI fails, can you help delete the cache for this PR workflow
Codecov Report
Merging #192 (aabe84c) into next (49208ef) will not change coverage.
The diff coverage isn/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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Glad you got CI working! Looks mergeable, right?
@agualis can you explain what went wrong??
Finally ready to merge 🎊 . It seems that apollo+vue ecosystem 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 🙏
Looks great :) Thank you for this!
Uh oh!
There was an error while loading. Please reload this page.
Updates the existing
Graphqlexample to make it compatible withVue 3+@vue/apollo-composable.The example needs a temporary patch until a pending PR is merged in
vue-apolloproject. 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
ComponentWithInjectedApolloto globally provide apollo client in the test. I would prefer not to do it and use some VTU option to callglobal.providebut 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.vuecomponent).