Queries

In this section, you’ll learn how to implement the resolver for the feed query so your clients are able to retrieve a list of links from your server.

Define a Link type for your data model

The first thing to do is remove the default Post type that was generated for you by graphql create and replace it with the Link type we already mentioned before.

Every link to be stored in the database should have a unique id, a description and a URL (just like the real Hackernews app). Here is how you can translate that requirement into SDL.

Deploy the database to apply changes

With the Link type in place, you can go ahead and deploy your Prisma database service.

Notice that you don’t have to explicitly install the Prisma CLI as it’s listed as a development dependency in your package.json.

The Prisma API now exposes queries and mutations to create, read, update and delete elements of type Link. Here’s a slightly simplified version of the generated operations (if you want to see everything that’s generated, you can check the Prisma schema in src/generated/prisma.graphql):

.../hackernews-node/src/generated/prisma.graphql
type Query {
  links(where: LinkWhereInput, orderBy: LinkOrderByInput, skip: Int, after: String, before: String, first: Int, last: Int): [Link]!
  link(where: LinkWhereUniqueInput!): Link
}

type Mutation {
  createLink(data: LinkCreateInput!): Link!
  updateLink(data: LinkUpdateInput!, where: LinkWhereUniqueInput!): Link
  deleteLink(where: LinkWhereUniqueInput!): Link
  updateManyLinks(data: LinkUpdateInput!, where: LinkWhereInput!): BatchPayload!
  deleteManyLinks(where: LinkWhereInput!): BatchPayload!
}

The links and link queries allow to retrieve a list of links as well a single link. The different mutations allow to create, update and delete links.

Adjust the application schema

At this point, your Prisma database service already allows to perform CRUD operations for the Link type. You can test this inside a GraphQL Playground if you like.

The next step for you is now to update the application schema and define the feed query there.

Notice that you’re importing the Link type from the generated Prisma schema rather than copying it over or entirely redefining it here. The import syntax is enabled by the graphql-import package.

Implement the feed resolver

Every field on your Query and Mutation types will be backed by a resolver function which is responsible for fetching the corresponding data. The first resolver you’ll implement is the one for feed.

In terms of code organization, the resolvers for your queries, mutations and subscriptions will be written in dedicated files called Query.js and Mutation.js and Subscription.js. They’ll then be referenced in index.js to instantiate your GraphQLServer.

There are a couple of things to note about this implementation:

  • The name of the resolver function feed is identical to the name of the field on the Query type. This is a requirement from graphql-js and graphql-tools which are used by graphql-yoga.
  • The resolver receives four input arguments:

    1. parent: Contains an initial value for the resolver chain (you don’t have to understand in detail what it’s used for in this tutorial; if you’re curios though, you can check this article).
    2. args: This object contains the input arguments for the query. These are defined in the application schema. In your case that’s , first and skip for filtering and pagination.
    3. context: The context is an object that can hold custom data that’s passed through the resolver chain, i.e. every resolver can read from and write to it.
    4. info: Contains the abstract syntax tree (AST) of the query and information about where the execution in the resolver chain currently is.
  • The filter argument is used to build a filter object (called where) to retrieve link elements where the description or the url contains that filter string.
  • Finally, the resolver simply delegates the execution of the incoming query to the links resolver from the Prisma API and returns the result of that execution.

Notice that in the line context.db.query.links({ first, skip, where }, info), you’re accessing the Prisma instance which you previously attached to the context object when instantiating the GraphQLServer.

To finalize the implementation, you need to make sure the feed resolver you just implemented is used when your GraphQLServer is instantiated.

For this to work, you of course need to import the Query object.

Test the API

You can now go ahead and test the feed query. Before you do so, you should store some dummy data in the database.

Note: The yarn command starts two processes. First, the GraphQL server which will be running on http://localhost:4000. Second, a GraphQL Playground that can be opened on http://localhost:3000. The Playground is running against the server on http://localhost:4000.

The server is now running on http://localhost:4000.

You now opened a GraphQL Playground which allows you to interact with two GraphQL APIs:

  • app: This is the API defined by your application schema, at the moment it only exposes the feed query.
  • database: This is the Prisma API exposing all the CRUD operations for the Link type.

Note: You can also use the yarn start command which only starts the server on http://localhost:4000 but won’t allow you to access the database Playground.

To create some initial data, you need to send a createLink mutation to the Prisma API.

Awesome, you just created your first Link instance in the database 🎉 You can either retrieve it using the links query from the Prisma API. In that case, you can simply use the same dev Playground in the database section again.

However, you can now also retrieve this new Link with the feed query from your application schema.

The server should return the following response:

{
  "data": {
    "feed": [
      {
        "description": "A GraphQL Database",
        "url": "https://www.graph.cool"
      }
    ]
  }
}

Notice that you can also provide the filter, first and skip arguments to the feed query. For example, you can try to retrieve only those links that contain the string “cool” in their url or their description:

{
  feed(filter: "cool") {
    description
    url
  }
}
Unlock the next chapter
What's the quickest way to test GraphQL APIs?
Building GraphQL requests with CURL
Using GraphQL Playground
Using Postman or similar app for sending HTTP requests
Building a frontend client app that sends requests