В попытке использовать версию 4 из Vue apollo в сотрудничестве с API композиции, как показано в этом руководстве , мы не можем получить какой-либо результат из стандартного запроса graphql .
Часть нашей настройки:
// src/boot/apollo.ts
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:5000/graphql", })
const cache = new InMemoryCache()
const apolloClient = new ApolloClient({ link: httpLink, cache, })
export default ({ app }) => {
app.setup = () => { provide(DefaultApolloClient, apolloClient) }
}
Теперь попытка использовать совершенно допустимый запрос, который действительно возвращает результаты на игровой площадке graphql, возвращает undefined
для allAcounts
:
// src/pages/Index.vue
<template>
<q-page padding>
<h2 v-if="loading">Loading...</h2>
<h4 v-else>Done loading</h4>
<div v-for="account in allAccounts" :key="account.accountIdentifier">
{{ account.accountIdentifier }}
</div>
</q-page>
</template>
<script lang="ts">
import { defineComponent, watch } from '@vue/composition-api'
import { useQuery, useResult } from '@vue/apollo-composable'
import gql from 'graphql-tag'
export default defineComponent({
setup() {
const allAccountsQuery = gql`
query allAccounts {
accounts {
accountIdentifier
}
}
`
const { result, loading } = useQuery(allAccountsQuery)
console.log('loading ', loading) // false
console.log('result ', result) // undefined
const allAccounts = useResult(result)
return { onClick, profile, allAccounts, loading }
},
})
</script>
Он возвращает только Done loading
, но ни одна учетная запись не возвращается. Хотя контент правильно отображается через площадку graphql:
введите описание изображения здесь