vue.jsgraphqlvue-apollographql-tag

Constructing query string with gql-tag in Vue-apollo


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.sstatic.net/qwgpw.png


Solution

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

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