Uncaught Error: Cannot detect villus Client, did you forget

[cworkschris]

to call useClient? Alternatively, you can explicitly pass a client as the manualClient argument.

To start off, thank you logaretm! Villus looks really cool and since apollo does not seem to work via cdn, it really keeps the spirit alive of vue usable for any size project.

I'm trying to do a minimal proof of concept, following along https://gitmemories.com/logaretm/villus Maybe I'm getting access to villus in the most awkward way possible, but what happens is the useClient is called successfully in the mounted() handling, but on the clickLoad handler I get "vue.global.js:1414 Uncaught Error: Cannot detect villus Client, did you forget to call useClient? Alternatively, you can explicitly pass a client as the manualClient argument."

I haven't messed around with the manualClient because it seems like I must be doing something fundamentally wrong. Am I way off in the weeds here?

I looked at the two comments where you explained that it can only be used during a composition api setup call. Will this not work at all when using options? I see this true: https://github.com/logaretm/villus/issues/72#issuecomment-716261003 Oddly, even when I move over to composition api and use the <script setup> I'm still having this same problem. I can't find anything manualClient either.

[logaretm]

I checked your earlier snippets and there is an issue with it:

function mounted() {
 // too late to call this
  useClient({
    url: 'http://somemachine.local:8000/graphql',
  });
}

Instead, add a setup function and call it there on your app component:

const app = createApp({
  setup() {
    useClient({
      url: 'http://somemachine.local:8000/graphql',
    });
  }
}

It should work fine with the options API as it is just additive. I will probably need to add examples with the options API usage but it would be very limited.

[cworkschris]

Thanks Awad, after I had deleted that snipped and changed to the composition api, I still had the same problem.

Chris Amow Software Engineer [TUTORWORKS][cid:67f6798c-fe16-4a45-b0fa-056c61719d52]

700 Airport Blvd Suite 450 Burlingame, CA 94010 650-298-8867 (Office) 866-694-3525 (Fax)

curriculaworks.com

---

From: Abdelrahman Awad @.> Sent: Saturday, September 17, 2022 2:47 PM To: logaretm/villus @.> Cc: Chris Amow - Development Team @.>; Author @.> Subject: Re: [logaretm/villus] Uncaught Error: Cannot detect villus Client, did you forget (Issue #172)

I checked your earlier snippets and there is an issue with it:

function mounted() { // too late to call this useClient({ url: 'http://somemachine.local:8000/graphql', }); }

Instead add a setup function and call it there on your app component:

const app = createApp({ setup() { useClient({ url: 'http://somemachine.local:8000/graphql', }); } }

— Reply to this email directly, view it on GitHubhttps://github.com/logaretm/villus/issues/172#issuecomment-1250130810, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AUTOJFPCPFKAAYRRGG6K2JLV6YN6PANCNFSM6AAAAAAQLL7CKU. You are receiving this because you authored the thread.Message ID: @.***>

[logaretm]

Sorry for the late response. Perhaps there are a couple of Vue installations competing here. Can you create a minimal repo for it where this happens?

[dydacki]

Hi,

I know it's been quite late but I have been encountering this error in Vue3 with composition API again. Mounting a component using the client like below ` return mount(IbmMqPage, { attachTo: document.body, global: { plugins: [ToastService, PrimeVue, router], provide: { // @ts-ignore the computed property type as it is needed to properly inject the web client

                url: 'https://localhost:8091/graphql',
            }),
        },
        stubs: {
            transition: false, // added due to a bug in vue-test-utils: https://github.com/vuejs/test-utils/issues/2430
            Toast: true,
            sync: false,
        },
        components: {
            InputText,
            MultiSelect,
        },
    },
});

};` worked like a charm in one component, but failed in another. Services using Villus look almost identical for both components, the only differences are in naming of their functions.

Any ideas?