Я использую vue 3 с apollo / client, но получаю сообщение об ошибке

Я использую vue 3 с api композиции с apollo / client. Я сделал все из документации, но это все, что я мог зайти. Я указал правильный URL-адрес бэкенда и просто не могу его понять. Это мой код, и я получаю предупреждение в терминале.

предупреждение в ./node_modules/@vue/apollo-composable/dist/useQuery.js

и в консоли браузера я получаю эту ошибку.

 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>

node.js graphql vuejs3 apollo-client vue-apollo
person usman mughal    schedule 22.01.2021    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Функция provide vue предназначена для добавления зависимости дочерним компонентам. Если вы хотите, чтобы ApolloClient был доступен во всех ваших компонентах, вы должны предоставить его сверху:

//main.js

...

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

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

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

В противном случае вы можете использовать provideApolloClient даже вне функции настройки или файлы vue, такие как импортированные .js или .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 )
person Alcides    schedule 16.04.2021
comment
Мне бы очень понравилось, если бы это сработало для меня; но это не так, потому что он жалуется, что 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> - person r3plica; 06.07.2021

arrow_upward
2
arrow_downward

Я получил ту же ошибку, но запустил, я понял, что документация по репо не завершена. https://github.com/quasarframework/app-extension-apollo/tree/v2

Отсутствует эта часть:

Ваш src / App.vue должен быть таким

<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: Нашел это в README библиотеки в your-app \ node_modules @ quasar \ quasar-app-extension-apollo \ README.md

person Ricky Vadala    schedule 16.06.2021

arrow_upward
1
arrow_downward

Я сам новичок в Vue, но что касается предупреждения;

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

Я считаю, что это решение будет зависеть от версий зависимостей вашего проекта, но я исправил его, добавив этот скрипт в свой проект:

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

Если вы не используете Vite, просто удалите строки 4-6, и это исправит ошибку no such file or directory. Если у вас разные версии зависимостей, просмотрите проблему, и вы можете найти сценарий, который подходит для ваших версий.

Надеюсь, это поможет, я столкнулся с этой ошибкой, просмотрев это видео https://youtu.be/UbYt1PokMrM

person David-Azael-Bernal    schedule 26.02.2021