Problem on Meteor + Vue Apollo 4?

VueJS
1

I tried to use Meteor Vue Apollo-4

// client/apolloClient.js
import { Meteor } from 'meteor/meteor'
import { ApolloClient } from 'apollo-client'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloLink } from 'apollo-link'
import { HttpLink } from 'apollo-link-http'
import { MeteorAccountsLink } from 'meteor/apollo'

const httpLink = ApolloLink.from([
  new MeteorAccountsLink(),
  new HttpLink({
    uri: Meteor.absoluteUrl('graphql'),
  }),
])

const cache = new InMemoryCache()

/**
 * Create apollo client
 */
const apolloClient = new ApolloClient({
  link: httpLink,
  cache,
})

export default apolloClient

--------------------------------------------------------

// client/main.js
import { Meteor } from 'meteor/meteor'
import Vue from 'vue'
import VueAPI, { provide } from '@vue/composition-api'
Vue.use(VueAPI)

import { DefaultApolloClient } from '@vue/apollo-composable'

import apolloClient from './apolloClient'
import App from './App.vue'

Meteor.startup(() => {
  new Vue({
    el: '#app',
    setup() {
      provide(DefaultApolloClient, apolloClient)
    },
    ...App,
  })
})

-----------------------------------------

// server/main.js
import { ApolloServer } from 'apollo-server-express'
import { WebApp } from 'meteor/webapp'
import gql from 'graphql-tag'

const typeDefs = gql`
  type Query {
    hello: String!
  }
`

const resolvers = {
  Query: {
    hello: () => 'Hello Apollo',
  },
}

// Create apollo server
const server = new ApolloServer({
  typeDefs,
  resolvers,
})

server.applyMiddleware({
  app: WebApp.connectHandlers,
  path: '/graphql',
})

WebApp.connectHandlers.use('/graphql', (req, res) => {
  if (req.method === 'GET') {
    res.end()
  }
})

-----------------------------------------------

// client/App.vue
<template>
  <div>
    <h1>Meteor Vue Apollo-4</h1>

    <div v-if="loading">Loading...</div>
    <div v-else-if="error">Error: {{ error.message }}</div>
    <div v-else-if="result && result.hello">{{ result.hello }}</div>
  </div>
</template>

<script>
import gql from 'graphql-tag'
import { useQuery } from '@vue/apollo-composable'

export default {
  name: 'App',
  setup() {
    const query = gql`
      query getHello {
        hello
      }
    `
    const { result, loading, error } = useQuery(query)

    return { result, loading, error }
  },
}
</script>
```

But get error
```
Error in callback for immediate watcher "function () { return source.value; }": "Error: Apollo Client with id default not found"
```

Note: Work fine in Graphql Playground
2

You are overriding your first setup function with ...App.

Try:

Meteor.startup(() => {
  new Vue({
    el: '#app',
    setup() {
      provide(DefaultApolloClient, apolloClient)
    },
    render: h => h(App),
  })
})
5 Likes
3

Very thanks, now work fine :rocket:

4

@theara hi there! can I know what package to install to make vue 3 properly work on meteorjs. Thanks