Sending parameters in GraphQL with Typescript results in an empty set of curly braces being returned

Question

Sending parameters in GraphQL with Typescript results in an empty set of curly braces being returned

I am new to learning GraphQL with Typescript and I am trying to pass an argument in a GraphQL function to return something dynamically. I have been struggling with this issue for the past hour and could not find any solutions. Here are the relevant code snippets from my project.

schema.ts

export default gql`
type Query {
    fetchCourse(courseId: String!): String
}
`

resolver.ts

export default {
    Query: {
        fetchCourse: (courseId: string): string => {
            console.log(courseId)
            return 'test'
            // I want to do someting like this when the argument is working
            // const data = await db('course').select('*').where('c_id', courseId).first()
            // return data.toString()
        }
    }
}

GraphQL query on GraphiQL

{
  fetchCourse(courseId: "1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed")
}

Currently, the Console.log() is outputting just an empty curly bracket ({}) or an empty object in JavaScript. I expected it to display the actual argument (

1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed

) instead.

Your responses would be greatly appreciated. Thank you.

javascript node.js typescript graphql

Answer 1

Answer №1

It took me a while to figure it out, but I finally found the solution. Perhaps my initial explanation was lacking. I was working with Fastify and Mercurius.

The fix is actually quite simple - just add an underscore (_) with unknown type as the first argument, and an object of the desired type as the second argument. For example, if your query looks like this :

type Query {
    add(x: Int, y: Int): Int
}

Then your resolver should look something like this

Query: {
    add: (_: unknown, { x, y }: { x: number, y: number }): number => {
        console.log(x, y)
        return x + y
    }
}

Therefore, the altered query for my specific question would be

Query: {
        fetchCourse: async (_: unknown, { courseId }: { courseId: string }): Promise<string> => {
        const data = await db('course').select('*').where('c_id', courseId)
        return JSON.stringify(data)
    }
}

Answer 2

It took me a while to figure it out, but I finally found the solution. Perhaps my initial explanation was lacking. I was working with Fastify and Mercurius.

The fix is actually quite simple - just add an underscore (_) with unknown type as the first argument, and an object of the desired type as the second argument. For example, if your query looks like this :

type Query {
    add(x: Int, y: Int): Int
}

Then your resolver should look something like this

Query: {
    add: (_: unknown, { x, y }: { x: number, y: number }): number => {
        console.log(x, y)
        return x + y
    }
}

Therefore, the altered query for my specific question would be

Query: {
        fetchCourse: async (_: unknown, { courseId }: { courseId: string }): Promise<string> => {
        const data = await db('course').select('*').where('c_id', courseId)
        return JSON.stringify(data)
    }
}

Sending parameters in GraphQL with Typescript results in an empty set of curly braces being returned

Answer №1

Similar questions

ways to validate the calling function in jquery

Node.js OTP Verification: Secure your app with one-time

Adjust the size of every card in a row when one card is resized

Tips for evaluating an array of objects in JavaScript

When I click the button, it deletes the DOM element and hides it, preventing me from

React/NextJS: Firebase Realtime Database displaying the message "Error: Client is offline"

Is there cause for worry regarding the efficiency issues of utilizing Object.setPrototypeOf for subclassing Error?

What is the best way to update the value of a preact signal from a different component?

Enable next-i18next to handle internationalization, export all pages with next export, and ensure that 404 error pages are displayed on non-generated pages

Guide on Implementing jQuery UI Autocomplete with Chrome's Speech Input Feature

Utilize S3 to host images and implement via Express in a Lambda-based project

Nested solution object populated with promises

Enhance your data retrieval from XPATH using Javascript

Convert JSON response date format to a format specified by the user

Guide to interacting with the Li element using JavaScript in Selenium

Tips on transmitting form information from client-side JavaScript to server-side JavaScript with Node.js

Where should the logic for the Redux app be implemented for optimal performance?

Sending a JWT token to a middleware with a GET request in Express Node.js - the proper way

Using React Material UI icon within an auto complete feature

Add up the duplicate elements in two arrays