Composition API and Quasar v2 support

[hognevevle]

The extension should probably support the Composition API of Vue Apollo, such as useQuery, useMutation etc.

https://v4.apollo.vuejs.org/api/use-query.html

I realize this is still only in alpha, so this issue is mostly for tracking.

[smolinari]

Just FYI, but we'll need Quasar on Vue3, before we change this AE. So, we are a while off, before that happens.

Scott

[stphdenis]

In the meantime, you can add the package @vue/apollo-composable and downgrade @vue/composition-api to version 0.5.0 for compatibility.

Finaly, modify apollo-client-hooks.js like this :

import { provide } from '@vue/composition-api'
import { DefaultApolloClient } from '@vue/apollo-composable'
...
export function apolloClientAfterCreate ({
  apolloClient,
  app,
  //router, store, ssrContext, urlPath, redirect
}) {
  app.setup = () => {
    provide(DefaultApolloClient, apolloClient)
  }
  // if needed you can modify here the created apollo client
}

For the moment, versions newer than 0.5.0 of the package @vue/composition-api are not compatible with the last current package @vue/apollo-composable (4.0.0-alpha.8)

You could also need the function toRef from newer versions of @vue/composition-api :

import { isRef } from "@vue/composition-api";
import { createRef, Ref } from "@vue/composition-api/dist/reactivity";

export function toRef<T extends object, K extends keyof T>(object: T, key: K): Ref<T[K]> {
  const v = object[key];
  if (isRef<T[K]>(v)) return v;

  return createRef({
    get: () => object[key],
    set: (v) => (object[key] = v),
  });
}

[philon123]

Hi, thanks for this really nice info! I tried to follow your instructions to backport "toRef" support by creating a file src/toRefCompatibility.ts with your code, but getting following error:

This dependency was not found:
@vue/composition-api/dist/reactivity in ./src/toRefCompatibility.ts

VS Code does find that folder and doesn't show me an error. Just the command line compiler complains.. Any idea what's going on?

[maspendig]

Thanks @stphdenis for the integration hint. Btw.: There is no compatibility problem since version 4.0.0-alpha.10 of @vue/apollo-composable as mentioned here.

[smolinari]

@ejez - (and all) I'm going to be attacking this issue and creating version 2 in the next week or two, since Vue 3 is out and Quasar v2 is around the corner. Would you (anyone) be interested in some (more) collaboration?

Scott

[oliversteiner]

Hello Scott
I'd love to help you out with this request. I am actually porting one of my Apps from Vue 2 / REST to Quasar Vue 3 / GraphQL. I have no Deadlines, so i can testing your progress in a Real World App, or even help you to rewrite the Code for Composition API.

[smolinari]

@oliversteiner - Thanks for the offer. Are you on Discord? Ping me please Scott (EN-DE)#52

Scott

[oliversteiner]

Hey Scott i have made a Discord Account ( OliverSteiner#5240 ) Let's get in contact.

[smolinari]

@oliversteiner - Can you enter into the Quasar Discord server? Otherwise, I can't DM you or you me. 😁

https://discord.gg/8MbthT2n

Scott

[smolinari]

@oliversteiner - Did you miss the above? 😁

I've started work on v2 of the extension. I've got the composition API working, it's just not where I'd like it to be, as it seems, you can't cleanly hook into the root component's setup function (with Quasar's boot files or with a Vue plugin). See here: https://github.com/smolinari/app-extension-apollo/discussions/3

Scott

[ejez]

Hi Scott,
Can you test with this: quasar ext add @ejez/apollo
Installation/usage instructions: https://gitlab.com/ejez/app-extension-apollo/-/blob/main/README.md
Use a typescript app.

You'll get a warning: "export 'onServerPrefetch' was not found in 'vue-demi', you can ignore it while waiting for vuejs/core#3070 or suppress it with:
node_modules/@vue/apollo-composable/dist/useQuery.js

...
import { ref, isRef, computed, watch, 
// @ts-expect-error
-onServerPrefetch, getCurrentInstance, onBeforeUnmount, nextTick, } from 'vue-demi';
+getCurrentInstance, onBeforeUnmount, nextTick, } from 'vue-demi';
...
import { trackQuery } from './util/loadingTracking';
+const onServerPrefetch = null;

[ejez]

For now, only vue apollo composition api is supported, also no ssr support... waiting for upstream projects...

[smolinari]

Yeah. I was that far too. 😁 https://github.com/smolinari/app-extension-apollo/tree/v2-work/src

I'm sure your work is a step up from mine though. I'll test it tomorrow.

Scott

[smolinari]

@ejez - Can we chat on Discord?

Scott

[jvmonjo]

Can you test with this: quasar ext add @ejez/apollo

Your implementation compiles without issues but when I try to make a query with useQuery, I get this error:

Uncaught (in promise) Error: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup.

[smolinari]

@jvmonjo - Have to ask the stupid question, but did you follow the instructions in README.md?

Scott

[jvmonjo]

@jvmonjo - Have to ask the stupid question, but did you follow the instructions in README.md?

Scott

Sure I have. But anyway my issue is in reference to @ejez/apollo implementation

[smolinari]

@jvmonjo - Have to ask the stupid question, but did you follow the instructions in README.md?
Scott

Sure I have. But anyway my issue is in reference to @ejez/apollo implementation

😁 - Yes, I am referring to the instructions in Ejez's repo.

Scott

[jvmonjo]

Fair enough, 😁 No, I haven't. I thought they were the same. I will and I'll post the results. **Edit**: After making the change suggested in the readme I confirm `@ejez/apollo` works. Thanks.

[ejez]

Thanks for the feedback @jvmonjo

[maggie44]

Fair enough, 😁 No, I haven't. I thought they were the same. I will and I'll post the results. Edit: After making the change suggested in the readme I confirm @ejez/apollo works. Thanks.

What was it in the readme that resolved it for you? The only thing I didn't do was use the method of calling it all in one, I stuck with separate files for the gql:

// gql/level/queries
import gql from 'graphql-tag'

export const GET_LEVELS = gql`
  query levels{
      levels(sort: "published_at:asc") {
          id
          level
      }
  }
`

Then call them from the file using it:

import { GET_LEVELS } from '../gql/level/queries'

...

export default defineComponent({
  name: 'MainLayout',
  setup () {

...

const { result: fetchedLevels, loading: fetchLevelsLoading, refetch: fetchLevels } = useQuery(GET_LEVELS)

...

Didn't want to change everything to align it all in one file because it will get long and messy pretty quick. Added everything else as per the Readme though and still getting:

Uncaught (in promise) Error: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup.

[smolinari]

@Maggie0002 - which readme? 😁

Scott

[maggie44]

Hi Scott,
Can you test with this: quasar ext add @ejez/apollo
Installation/usage instructions: https://gitlab.com/ejez/app-extension-apollo/-/blob/main/README.md
Use a typescript app.

You'll get a warning: "export 'onServerPrefetch' was not found in 'vue-demi', you can ignore it while waiting for vuejs/vue-next#3070 or suppress it with:
node_modules/@vue/apollo-composable/dist/useQuery.js

...
import { ref, isRef, computed, watch, 
// @ts-expect-error
-onServerPrefetch, getCurrentInstance, onBeforeUnmount, nextTick, } from 'vue-demi';
+getCurrentInstance, onBeforeUnmount, nextTick, } from 'vue-demi';
...
import { trackQuery } from './util/loadingTracking';
+const onServerPrefetch = null;

This one.

[ejez]

Did you provide the Apollo client to the rest of your components from App.vue?
https://gitlab.com/ejez/app-extension-apollo/-/blob/main/README.md#appvue

[maggie44]

Did you provide the Apollo client to the rest of your components from App.vue?
https://gitlab.com/ejez/app-extension-apollo/-/blob/main/README.md#appvue

Yep: https://github.com/LearnersBlock/library/blob/q2/src/App.vue

[ejez]

Your project is Quasar v1, the above was for v2, follow this instead: #93 (comment)

[ejez]

sorry was looking at the wrong branch, one sec ...

[ejez]

Can you try to reproduce in a new clean project, so we can isolate the issue in an easier way... thx

[smolinari]

@ejez - Thanks for jumping in.

Would you mind PRing your version into the repo? How about if we add a "next" branch and I'll remove the "v2-next" branch? Or just PR into that one? Not sure what would be easiest for you.

Scott

[ejez]

Hi Scott, will try to do it later today, either "next" or "v2" will do. (not both together)

[ejez]

I prefer "v2", what do you think

[maggie44]

Can you try to reproduce in a new clean project, so we can isolate the issue in an easier way... thx

Seems like the issue is stemming from here, in App.vue:

    const { onError } = useQuery(GET_RESOURCES)

    onError(() => {
      setTimeout(() => {
        apiIsUp.value = false
      }, 1000)
    })

It is executed right after provide(DefaultApolloClient, apolloClient). It was happy enough in the old version, but not so happy here. When I take it out, it loads ok. Not a major issue, will write something else to do the same thing that it will get along with, but noting here in case it indicates anything more to you guys.

Thanks for taking a look, and putting the time in to developing the extension.

[smolinari]

@ejez - Yeah, that is fine. v2 it is. 😁 Just have to figure out how to get the branch added, as I don't have full perms for the repo.

Scott

[smolinari]

FYI, the next version (v2) is now in the v2 branch. Thanks goes to @ejez for his awesome work!

Scott

[maggie44]

Hi Scott,
Can you test with this: quasar ext add @ejez/apollo
Installation/usage instructions: https://gitlab.com/ejez/app-extension-apollo/-/blob/main/README.md
Use a typescript app.

You'll get a warning: "export 'onServerPrefetch' was not found in 'vue-demi', you can ignore it while waiting for vuejs/vue-next#3070 or suppress it with:
node_modules/@vue/apollo-composable/dist/useQuery.js

...
import { ref, isRef, computed, watch, 
// @ts-expect-error
-onServerPrefetch, getCurrentInstance, onBeforeUnmount, nextTick, } from 'vue-demi';
+getCurrentInstance, onBeforeUnmount, nextTick, } from 'vue-demi';
...
import { trackQuery } from './util/loadingTracking';
+const onServerPrefetch = null;

onServerPrefetch should now be resolved in the latest beta: vuejs/apollo#1102 (comment)

[Am3ra]

Any update on getting apollo to quasar V2?

[smolinari]

Any update on getting apollo to quasar V2?

FYI, the next version (v2) is now in the v2 branch.

https://github.com/quasarframework/app-extension-apollo/tree/v2

Scott

[hipertracker]

v2 does not work. vue-router.esm-bundler.js?f6c4:3295 Error: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup.

[smolinari]

@hipertracker - It certainly works. You have a problem with your code or setup. Are you trying to call the client outside of a component? If yes, you have the answer in front of you.

Scott

[hipertracker]

@smolinari I am not trying to call the client outside of the component. To reproduce the bug I have created a new Quasar project and added a simple component. https://github.com/hipertracker/b8-frontend
After running quasar dev command I can see a blank page and the following errors in the Chrome Developers tool:

vue-router.esm-bundler.js?f6c4:3295 Error: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup.
    at resolveClient (webpack-internal:///./node_modules/@vue/apollo-composable/dist/index.esm.js:60)
    at start (webpack-internal:///./node_modules/@vue/apollo-composable/dist/index.esm.js:289)
    at immediate (webpack-internal:///./node_modules/@vue/apollo-composable/dist/index.esm.js:505)
    at callWithErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6829)
    at callWithAsyncErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6838)
    at job (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:7243)
    at doWatch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:7288)
    at watch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:7129)
    at useQueryImpl (webpack-internal:///./node_modules/@vue/apollo-composable/dist/index.esm.js:503)
    at useQuery (webpack-internal:///./node_modules/@vue/apollo-composable/dist/index.esm.js:240)
triggerError @ vue-router.esm-bundler.js?f6c4:3295
4index.esm.js?0df5:48 Uncaught (in promise) Error: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup.
    at resolveClient (webpack-internal:///./node_modules/@vue/apollo-composable/dist/index.esm.js:60)
    at start (webpack-internal:///./node_modules/@vue/apollo-composable/dist/index.esm.js:289)
    at immediate (webpack-internal:///./node_modules/@vue/apollo-composable/dist/index.esm.js:505)
    at callWithErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6829)
    at callWithAsyncErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6838)
    at job (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:7243)
    at doWatch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:7288)
    at watch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:7129)
    at useQueryImpl (webpack-internal:///./node_modules/@vue/apollo-composable/dist/index.esm.js:503)
    at useQuery (webpack-internal:///./node_modules/@vue/apollo-composable/dist/index.esm.js:240)

[hipertracker]

I can see also some TS warnings but they are not the main problem

[smolinari]

@hipertracker - Not sure what to tell you. Everything works fine for me. You might want to try removing node_modules, and any lock files and reinstall dependencies.

Scott

[hipertracker]

@smolinari did you try this from scratch?

git clone https://github.com/hipertracker/b8-frontend.git
cd b8-frontend
yarn
quasar dev

Have you not any Typescript warnings in the terminal, really?

Has your Chrome browser not any errors in the Developer Tools?

What Node are you using? I use 16.13.1

[smolinari]

@hipertracker - By "works fine for me" I mean, it works fine in my project. You naturally have to set up the extension i.e. set up the apollo client and use your "options" properly to get everything to work.

Scott

[hipertracker]

@smolinari "it works in my project" sounds like nothing to me. I have created a sample project to reproduce the bug. Do you want to help or only to say f**k off?

[smolinari]

@hipertracker - I did download your reproduction repo and ran it before I made my last comment above. Your repo is not set up to do anything. Do some set up (use the options object and get the client options you need going) and if necessary, change any to unknown. That should get you a step further. This repo makes the assumption you know what you are doing with Apollo Client and only gets you the initial scaffolding to start setting up Apollo for your Quasar project.

Scott

[smolinari]

@hipertracker - Someone else just had the same problem as you were having and I believe it's a simple error of not adding the apollo boot file to quasar.conf.js.

I'm closing this issue too, as the OP is resolved in the end.

Scott