Composition API and Quasar v2 support about app-extension-apollo HOT 47 CLOSED

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;

from app-extension-apollo.

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),
  });
}

from app-extension-apollo.

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

from app-extension-apollo.

from app-extension-apollo.

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

from app-extension-apollo.

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

Scott

from app-extension-apollo.

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?

from app-extension-apollo.

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.

from app-extension-apollo.

@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

from app-extension-apollo.

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.

from app-extension-apollo.

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

Scott

from app-extension-apollo.

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

from app-extension-apollo.

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

https://discord.gg/8MbthT2n

Scott

from app-extension-apollo.

@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

from app-extension-apollo.

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

from app-extension-apollo.

@ejez - Can we chat on Discord?

Scott

from app-extension-apollo.

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.

from app-extension-apollo.

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

Scott

from app-extension-apollo.

@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

from app-extension-apollo.

@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

from app-extension-apollo.

Thanks for the feedback @jvmonjo

from app-extension-apollo.

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.

from app-extension-apollo.

@maggie0002 - which readme? 😁

Scott

from app-extension-apollo.

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.

from app-extension-apollo.

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

from app-extension-apollo.

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

from app-extension-apollo.

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

from app-extension-apollo.

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

from app-extension-apollo.

@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

from app-extension-apollo.

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

from app-extension-apollo.

I prefer "v2", what do you think

from app-extension-apollo.

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.

from app-extension-apollo.

@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

from app-extension-apollo.

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

Scott

from app-extension-apollo.

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)

from app-extension-apollo.

Any update on getting apollo to quasar V2?

from app-extension-apollo.

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

from app-extension-apollo.

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.

from app-extension-apollo.

@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

from app-extension-apollo.

@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)

from app-extension-apollo.

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

from app-extension-apollo.

@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

from app-extension-apollo.

@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

from app-extension-apollo.

@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

from app-extension-apollo.

@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?

from app-extension-apollo.

@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

from app-extension-apollo.

@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

from app-extension-apollo.