vue apollo 4 不返回 graphql 查询结果
vue apollo 4 not returning graphql query results
在努力使用 version 4 of Vue apollo in cooperation with the composition api as shown in this tutorial 时,我们似乎无法从标准的 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) }
}
现在尝试使用一个完全有效的查询 return 结果在 graphql 游乐场 returns undefined
for 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>
只有 returns Done loading
但没有一个帐户被 returned。虽然通过 graphql 游乐场可以正确看到内容:
显然这是 known issue with vue-apollo 4 not being compatible with any version higher than "@vue/composition-api": "0.5.0"
. So downgrading fixed the issue temporarily until vue-apollo 4
will merge the fix。
yarn add @vue/composition-api@0.5.0
在努力使用 version 4 of Vue apollo in cooperation with the composition api as shown in this tutorial 时,我们似乎无法从标准的 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) }
}
现在尝试使用一个完全有效的查询 return 结果在 graphql 游乐场 returns undefined
for 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>
只有 returns Done loading
但没有一个帐户被 returned。虽然通过 graphql 游乐场可以正确看到内容:
显然这是 known issue with vue-apollo 4 not being compatible with any version higher than "@vue/composition-api": "0.5.0"
. So downgrading fixed the issue temporarily until vue-apollo 4
will merge the fix。
yarn add @vue/composition-api@0.5.0