Constructing query string with gql-tag in Vue-apollo

Question

I believe it is possible to construct GraphQL query string dynamically with JS but I can't figure out the syntax. I have a query in my Vue component which looks like this:

  apollo: {
    metricsOee: {
      query: METRICS_OEE,
      loadingKey: 'loading',
      variables() {
        return {
          widgetType: this.data.name,
          page: 'dashboard',
          currentMetricDay: this.currentTime
        }
      }
    }
  }

I'd like not to pass currentTime from my components every time, but calculate it in the query itself. My attempt of doing it looks like this:

[![enter image description here][1]][1]

I understand that gql`` is not the same as JS interpolation, but this is to illustrate the problem
[1]: https://i.stack.imgur.com/qwgpw.png

Answer 1

You might need to wrap your ${currentMetricDay} with double quotes:

...
metricsOee: getMetricsOee(
currentMetricDay: "${currentMetricDay}"
widgetType: $widgetType
page: $page
)
...