Error: BabelPluginRemoveGraphQL: String interpolations

Question

I am getting below error when trying to pass variable dynamically in gatsBy Graphql.

Error

Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
Error: BabelPluginRemoveGraphQL: String interpolations are not allowed in graphql fragments. Included fragments should be referenced as `...MyModule_foo`.

Query

let mytext = 'welcome'
let myQuery = graphql`query($text: String = "${mytext}") {
            allGhostPost : allGhostPost(filter:{title:{eq: $text}}) {
              edges {
                node {
                  id
                  slug
                }
              }
            }
          }`

Please help!!!

Answer 1

Inserting arbitrary text into queries like this is a well-known security issue and the Babel plugin is almost certainly right to forbid it. GraphQL defines a JSON-over-HTTP payload format that allows passing the variables separately (encoded as JSON objects to minimize the possibility of injection attacks).

You don't show what's actually making the query, but it should have a place to add a map of GraphQL variables. (For example, the graphql-js reference implementation includes a variableValues parameter to its top-level graphql function.) Remove the = "${mytext}" part of the query, and instead use a variables object like {text: mytext}.