CODEWITHSUNDEEP
typescriptapollo-clientapollo-server
Peter Boomsma
Peter Boomsma

Reputation: 9808

Cannot import Apollo resolvers

I have a Apollo query:

// ./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({});
  },
};

And in my dashboard component I'm trying to return the data from Apollo:

// ./src/dashboard.tsx

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

  ...
}

But TSlint is showing an error:

TS2345: Argument of type '() => PrismaPromise<Movie[]>' is not assignable to parameter of type 'DocumentNode | TypedDocumentNode<any, OperationVariables>'. Type '() => PrismaPromise<Movie[]>' is missing the following properties from type 'TypedDocumentNode<any, OperationVariables>': kind, definitions

I'm using:

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

Upvotes: 0

Views: 446

Answers (1)

Lin Du
Lin Du

Reputation: 102207

useQuery() accepts a query parameter which type is DocumentNode. You can't pass a resolver to it.

DocumentNode:

A GraphQL query document parsed into an AST by gql.

The GraphQL resolver is used to resolve the fields defined in the GraphQL schema. In actual use, it is generally placed on the server-side, set up a GraphQL server, serving over HTTP with Database, REST API as its data source.

GraphQL resolver is placed on the data production side, and the consumer side defines the fields that need to be queried by constructing DocumentNode AST.

GraphQL only defines the exchange method between the data production end and the consumer end and has nothing to do with the specific upper-layer communication protocol HTTP, RPC, etc.

See Is GraphQL frontend or backend? and Does GraphQL use HTTP?

You should create your query on the client-side like this:

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

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

// In React component
useQuery(QUERY_MOVIES);

Upvotes: 1

Related Questions