Query variables not being passed down from vue component in apollo

Question

I have a simple query which takes in an ID parameter, but it is not working. It says "TypeError: Cannot read property 'taskId' of undefined" . So I think it does not recognize the 'this' keyword for some reason.

Please take a look:

Apollo query from frontend component:

    getCommentsByTask: {
      query: GET_COMMENTS_BY_TASK,
      variables: {
        taskId: this.taskId
      },
      result({ data }) {
        this.getComments = data;
        console.log("data", data);
      }
    }

Defined the query in frontend:

query GET_COMMENTS_BY_TASK($taskId: ID!) {
  getCommentsByTask(taskId: $taskId) {
    id
    parentId
    ownerId
    text
  }
}

Resolver in server:

async getCommentsByTask (_, {taskId}, context) {
      const userId = getUserId(context)
      const user = await User.findById(userId)

      if (!user) return

      const comments = await Comment.findById(taskId)

      return comments
    }

Schema:

type Query {
  getCommentsByTask(taskId: ID!): [Comment]
}

Answer 1

Assuming that's a smart query, variables should be a (regular, non-arrow) function if you need access to this.