reactjs - Template literal - getting error from API

Solution:

The issue is that given some query like "naruto", your current code results in the following text:

media(type:ANIME, search: naruto ) {
Copy code

This is not valid syntax since String literals should be surrounded by double quotes (").

Don't use string interpolation to provide dynamic values to the query. These should always be expressed as variables () and included as a separate object inside your request alongsidequery.

You need to define the variable as part of your operation, providing the appropriate type

var query = `query Search ($searchQuery: String!) {
Copy code

then you can use the variable anywhere inside the operation:

media(type:ANIME, search: $searchQuery) {
Copy code

Now just pass the variable value along with your request.

body: JSON.stringify({
  query,
  variables: {
    searchQuery,
  }
})
Copy code

Note that the variable name is prefixed with a$ inside the GraphQL document, but outside of it, we don't do that.

Solution:

media() looks like a function, so in that case the correct syntax would be:

media(type="ANIME", search=searchQuery)
Copy code

or if the argument of media() is an object

media({type: "ANIME", search: searchQuery})
Copy code

Also, you don't need to use ${} around searchQuery since searchQuery is already a string. The usage for that would be something like

`${searchString}` or `foo${searchString}bar`
Copy code

using the `` around the ${} utility to represent a string and its variable inside the string literal.

Hope it helps!