Same GraphQL query work in playground but cannot work in real projects

Question

I'm new to GraphQL, I want to apply GraphQL in my project. However, the query can work perfectly in the playground, but the same query cannot work in my Next.js project and it returns an empty array.

query GetComments($slug:String!) {
    comments(where: {post: {slug:$slug}}){
        name
        createdAt
        comment
    }
}

Below is how I apply it on my nextJS App.

import { request, gql } from 'graphql-request';

const graphqlAPI = process.env.NEXT_PUBLIC_GRAPHCMS_ENDPOINT;

export const getComments = async (slug) => {
  const query = gql`
    query GetComments($slug:String!) {
      comments(where: {post: {slug:$slug}}){
        name
        createdAt
        comment
      }
    }
  `;

  const result = await request(graphqlAPI, query, { slug });

  return result.comments;
};

Even if I remove the variable to a real term, it still return an empty array. How could I fix this?