I am using vue 3 with apollo/client but getting an error

Question

I am using vue 3 with composition api with apollo/client . I did everything from documentation but this is as far I could go.I provied a correct backend url and just cant figure it out.This is my code and I get a warning in the terminal

warning in ./node_modules/@vue/apollo-composable/dist/useQuery.js

and in the browser console I am getting this error.

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

 <template>
   <div class="hello">
     working with graphql
   </div>
 </template>
 <script>
  import { useQuery,DefaultApolloClient } from "@vue/apollo-composable"
  import { provide } from "vue" 
  import gql from "graphql-tag"
  import {ApolloClient,createHttpLink,InMemoryCache,} from "@apollo/client/core"
  const httpLink = createHttpLink({
    uri: "http://localhost:3000/graphql",
  })
  const cache = new InMemoryCache()
  const apolloClient = new ApolloClient({
    link: httpLink,
    cache,
  })
  export default {
    name: "HelloWorld",
    setup() {
      provide(DefaultApolloClient, apolloClient)
      const { result } = useQuery(gql`
        query getPosts {
          Post {
            id
            context
            title
          }
        }
      `)
      console.log(result)
    },
  }
  </script>

Balmy

please see #70721726 if you got this error when using Quasar with Apollo. – Rhoda

Answer 1

The provide vue function is to inject dependency to childs components. If you want the ApolloClient available in all your components you should provide it from the top:

//main.js

...

const apolloClient = new ApolloClient({
  link: httpLink,
  cache,
})

const app = new Vue({
  setup () {
    provide(DefaultApolloClient, apolloClient)
  },

  render: h => h(App),
})

Otherwise you can use provideApolloClient, even outside setup function or vue files like imported ones .js or .ts:

//userService.js
import {
    provideApolloClient,
    useQuery,
    useResult,
} from '@vue/apollo-composable';

...

const apolloClient = new ApolloClient({
  link: httpLink,
  cache,
})

provideApolloClient(apolloClient);

const { result, loading, onError, onResult } = useQuery(query)

export let users = useResult(result, [], data => data.users )

Jodeejodhpur

I would love it if this would work for me; but it doesn't because it complains that ApolloClient<NormalizedCacheObject> is not assignable to parameter of type ApolloClient<any>. Property setLink is missing in type ApolloClient<NormalizedCacheObject> but required in type ApolloClient<any> – Constancy

Answer 2

I got the same error but got it running, I realized that the documentation on the repo is not complete. https://github.com/quasarframework/app-extension-apollo/tree/v2

Is missing this part:

Your src/App.vue should be like this

<template>
  <router-view />
</template>
<script lang="ts">
  import { defineComponent, provide } from 'vue'
  import { ApolloClients } from '@vue/apollo-composable'
  import { apolloClients } from 'src/extensions/apollo/boot'

  export default defineComponent({
    name: 'App',
    setup() {
      provide(ApolloClients, apolloClients)
    },
  })
</script>

PD: Found this on the README of the library in your-app\node_modules@quasar\quasar-app-extension-apollo\README.md

Francklyn

Answer 3

I am pretty new to Vue myself, but in regards to the warning;

warning in ./node_modules/@vue/apollo-composable/dist/useQuery.js

I believe this solution will be dependent on the dependency versions of your project, but I fixed it by adding this script to my project:

https://github.com/vuejs/vue-apollo/issues/1011#issuecomment-714410089

If you are not using Vite, simply remove lines 4-6 and it fixes the no such file or directory error. If you have different dependency versions look through the issue and you might find a script that fits your versions.

Hope this helps, I ran into this error by following along with this video https://youtu.be/UbYt1PokMrM

Fritz