GraphQL查询返回null，但Apollo Client能收到数据？

小海霞提问于 2026-03-01 15:25:23 阅读 9

前端

我在用Node.js搭的GraphQL服务，前端用Vue + Apollo Client调用，明明network里看到response有数据，但组件里拿到的一直是null，到底哪出问题了？

我试过检查resolver返回结构、核对schema类型，甚至把fetchPolicy改成no-cache都不行。控制台也没报错，就是data字段为null，很奇怪。

<template>
  <div>{{ user?.name || '加载中...' }}</div>
</template>

<script>
import { useQuery, gql } from '@apollo/client'

const GET_USER = gql
  query GetUser($id: ID!) {
    user(id: $id) {
      name
    }
  }


export default {
  setup() {
    const { data } = useQuery(GET_USER, { variables: { id: '1' } })
    return { user: data?.user }
  }
}
</script>

我来解答赞 2 收藏

反馈

1 条解答

小玉浩 Lv1

你这导入的包不对，useQuery是从@apollo/client导的，那是React版本，在Vue里根本没法正常响应。

最简单的办法，装个@vue/apollo-composable，改一下导入和写法：

import { useQuery } from '@vue/apollo-composable'

import { gql } from 'graphql-tag'



const GET_USER = gql

  query GetUser($id: ID!) {

    user(id: $id) {

      name

    }

  }





export default {

  setup() {

    const { result } = useQuery(GET_USER, { id: '1' })

    return { user: result.value?.user }

  }

}

Vue版的返回的是result而且是个ref，你之前那样写setup只执行一次，数据还没回来就已经return了，当然是null。

2026-03-01 16:00