Issues with TypeScript and resolvers

Help
1

My setup isn’t working correctly:

In my app.tsx I want to use useQuery to get some results from Apollo:

// app.tsx
import {useQuery} from '@apollo/client';
import resolvers from './resolvers';

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

My movies query looks like this:

// ./resolver.js

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

This shows the error:

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, definitionsts(2345)

I believe the issue is that the return type of the resolver is PrismaPromise<Movie[]> but useQuery requires a type of DocumentNode. So I’m guessing I have to refactor my resolvers to make it work with TypeScript but I can’t find any good source on that.

2

Hey @alucardu. There are a few issues here that need to be addressed - have you followed any tutorials / getting started guides yet? I’d recommend Apollo Odyssey if not.

Resolvers are typically server code - they’re used in running a GraphQL server. You generally don’t call into them directly, as this is a process that’s managed by your server framework + graphql-js. Resolvers will be run when your client sends a query to your GraphQL server.

useQuery is client code (run in your React app). Its first argument expects a DocumentNode as you’ve noted, which is effectively a GraphQL query string which usually looks something like:

const {loading, error, data} = useQuery(gql`
  query Movies {
    movies {
      id
      # ...more movie fields (this is just a comment)
    }
  }
`);

Note that gql is a tagged template literal for converting a string into a parsed DocumentNode.

1 Like