vue apollo 4 不返回 graphql 查询结果

Posted 2023-03-08

【中文标题】vue apollo 4 不返回 graphql 查询结果

【英文标题】：vue apollo 4 not returning graphql query results

【发布时间】：2020-11-02 17:14:06

【问题描述】：

为了将 Vue apollo 的 version 4 与 this tutorial 中所示的组合 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 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>

它只返回Done loading，但不返回单个帐户。虽然内容通过 graphql 游乐场正确可见：

【参考方案1】：

显然这是一个 known issue 与 vue-apollo 4 不兼容任何高于 "@vue/composition-api": "0.5.0" 的版本。所以降级暂时解决了这个问题，直到vue-apollo 4 将合并fix。

yarn add @vue/composition-api@0.5.0