Как добавить @ vue / apollo-composable в Quasar Frramework - PullRequest
Новая
       67

Как добавить @ vue / apollo-composable в Quasar Frramework

0 голосов
/ 10 июля 2020

Мы пытаемся добавить загрузочный файл в Quasar Framwework, чтобы иметь возможность использовать @vue/apollo-composable с API композиции Vue. В этом руководстве объясняется, как это делается для старого клиента apollo и этого для новой версии.

Проблема, с которой мы столкнулись, заключается в подключении Apollo клиент на Vue. Поэтому нам нужно перевести пример из документации в загрузочный файл Quasar: 

// example docs
import { provide } from '@vue/composition-api'
import { DefaultApolloClient } from '@vue/apollo-composable'

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

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

Загрузочный файл Quasar: 

import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloClient } from 'apollo-client'
import { DefaultApolloClient } from '@vue/apollo-composable'
import { provide } from '@vue/composition-api'

const httpLink = createHttpLink({
  uri: 'http://localhost:4000/graphql',
})

const cache = new InMemoryCache()

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

export default async ({ app } /* { app, router, Vue ... } */) => {
  app.setup(provide(DefaultApolloClient, apolloClient))
}

Проблема:

введите описание изображения здесь

Какой правильный синтаксис следует использовать в загрузочном файле Quasar Framework для добавления клиента Apollo?

Ответы [ 2 ]

1 голос
/ 10 июля 2020

Нашел правильный синтаксис в этом ответе : 

import { boot } from 'quasar/wrappers'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloClient } from 'apollo-client'
import { DefaultApolloClient } from '@vue/apollo-composable'
import { provide } from '@vue/composition-api'
import config from 'src/app-config.json'

export default boot(({ app }) => {
  const httpLink = createHttpLink({
    uri: config.resources.gatewayApi.uri,
  })

  const cache = new InMemoryCache()

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

  app.setup = () => {
    provide(DefaultApolloClient, apolloClient)
    return {}
  }
})
0 голосов
/ 18 июля 2020

Я перевел код @ DarkLite1 на совместимость с TypeScript. Итак, следующий файл src/boot/vue-apollo-4.ts (не забудьте зарегистрировать его в quasar.conf.js): 

<code><pre>
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloClient } from 'apollo-client'
import { DefaultApolloClient } from '@vue/apollo-composable'
import { provide } from '@vue/composition-api'
import { boot } from 'quasar/wrappers'

const httpLink = createHttpLink({
  uri: 'http://localhost:8080/v1/graphql'
})

const cache = new InMemoryCache()

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

export default boot(({ app }) => {
  app.setup = () => {
    provide(DefaultApolloClient, apolloClient)
    return {}
  }
})
...