无法导入 Apollo 解析器

Question

我有一个阿波罗查询：

// ./src/resolvers.js

const Movie = {
  id: (parent) => parent.id,
  name: (parent) => parent.name,
  tmdb_id: (parent) => parent.tmdb_id,
};

const Query = {
  movies: () => {
    return prisma.movie.findMany({});
  },
};

在我的仪表板组件中，我试图从 Apollo 返回数据：

// ./src/dashboard.tsx

const DashboardComponent = () => {
  const {loading, error, data} = useQuery(resolvers.Query.movies);

  ...
}

但是 TSlint 显示错误：

TS2345：“() => PrismaPromise”类型的参数不可分配给“DocumentNode |”类型的参数TypedDocumentNode'。 类型 '() => PrismaPromise' 缺少来自类型 'TypedDocumentNode' 的以下属性：种类、定义

我正在使用：

"prisma": "2.30.0",
"typescript": "^4.3.5",
"apollo-client": "^2.6.10",
"apollo-server": "^3.2.0",

Answer 1

useQuery() 接受类型为DocumentNode 的query 参数。您不能将解析器传递给它。

DocumentNode:

由gql 解析为 AST 的 GraphQL 查询文档。

GraphQL 解析器用于解析 GraphQL 模式中定义的字段。实际使用中，一般放在服务器端，搭建一个GraphQL服务器，通过HTTP服务，以Database，REST API为数据源。

GraphQL解析器放在数据生产端，消费者端通过构造DocumentNodeAST定义需要查询的字段。

GraphQL 只定义了数据生产端和消费端之间的交换方式，与具体的上层通信协议 HTTP、RPC 等无关。

见Is GraphQL frontend or backend?和Does GraphQL use HTTP?

您应该像这样在客户端创建查询：

import { gql, useQuery } from '@apollo/client';

const QUERY_MOVIES = gql`
  query QueryMovies {
     movies {
       id
       name
     }
  }
`

// In React component
useQuery(QUERY_MOVIES);