Skip to content
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

Enable a disabled useQuery outside of setup() -- alpha 12 #1082

Open
rebz opened this issue Oct 20, 2020 · 4 comments
Open

Enable a disabled useQuery outside of setup() -- alpha 12 #1082

rebz opened this issue Oct 20, 2020 · 4 comments

Comments

@rebz
Copy link

rebz commented Oct 20, 2020

Describe the bug
Using useQuery and attempting to enable a disabled query when used outside of setup(). Looks like the ApolloClient is coming back as null.

vue.runtime.esm.js:619 [Vue warn]: Error in callback for watcher "function () { return source.value; }": "Error: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup."
Error: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup.

image

Logging out the following in useApolloClient...
image
image

To Reproduce
Steps to reproduce the behavior:

  1. Clone this v4 repo
  2. Go to /packages/test-e2e-composable-vue3/src/components/NoSetupQuery.vue
  3. Update the <script> tag with what you see below
  4. Try running your no-setup-query test.
<script lang="ts">
import { apolloClient } from '@/apollo'
import { gql } from '@apollo/client/core'
import { provideApolloClient, useQuery, useResult } from '@vue/apollo-composable'
import { defineComponent, ref } from 'vue'

// Global query

const enabled = ref(false)

const query = provideApolloClient(apolloClient)(() => useQuery(gql`
  query hello {
    hello
  }
`, null, () => ({ enabled: enabled.value })))

const hello = useResult(query.result, [])

function enable () {
  enabled.value = true
}

export default defineComponent({
  setup () {
    enable()
    return {
      hello,
    }
  },
})
</script>

Expected behavior
I expect the default ApolloClient, provided using provideApolloClient(), to be found by useQuery() and and for the query to execute once enabled.

Versions
vue: 2.6 w/ @vue/composition-api plugin
vue-apollo: 4.0.0-alpha.12
apollo-client: 3.2.2

@rebz rebz changed the title Enable a disabled useQuery outside of setup() Enable a disabled useQuery outside of setup() -- alpha 12 Oct 20, 2020
@rebz
Copy link
Author

rebz commented Oct 21, 2020

Tried using useLazyQuery this morning and still have the same issue. This appears to be an issue with using functions for variables and options. So long as I don't use a function or any reactive variables it works.

@rebz
Copy link
Author

rebz commented Oct 21, 2020

Also worth mentioning that useQueryLoading does not appear to work outside of setup() even when using provideApolloClient.

@netzfluencer
Copy link

In your root instance, you need to provide a default Apollo Client instance v4.vue-apollo

I noticed that using the client like the docu suggests is also leading to the warning for me. But providing the Client in the main.js (there is my root) with provideApolloClient(defaultClient) works for me.

let vue = new Vue({
    el: '#app',
    setup() {
       provideApolloClient(defaultClient)
    },
    router,
    store,
    i18n,
    apolloProvider,
    components: { App },
    template: '<App/>'
  })

@karladler
Copy link

is this still an issue? t least I have the same problem upgrading to Vue3 and I can't find where it comes from...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants