Can't pass arguments in useQuery with React-Query + Graphql-Request

Question

I'm a bit stuck. I am using graphql-request with react-query, following the example code quite closely. I replaced it with my own backend, and it works when I don't use variables, but hardcode the values. It also all works in my GraphiQL test environment.

So doing this works:

export default function usePost(postId) {
  return useQuery(
    ["post", postId],
    async () => {
      const { post } = await request(
        endpoint,
        gql`
          query {
            post(id: "123123123123") { // <--- with the id hard-coded, it works
              id
              heading
              content
            }
          }
        `
      )

      return post
    },
    {
      enabled: !!postId,
    }
  )
}

What follows is exactly the same code, but now the previously hard-coded post-id ("123123123123") is replaced by a variable (${postId}). Exactly as described in the example code

export default function usePost(postId) {
  return useQuery(
    ["post", postId],
    async () => {
      const { post } = await request(
        endpoint,
        gql`
          query {
            post(id: ${postId}) { // <--- with the ${postId} variable, things break, but it's exactly the same syntax as in the react-query example & it works in my graphiql backend. Also console-logged the postId, and it is correct
              id
              heading
              content
            }
          }
        `
      )

      return post
    },
    {
      enabled: !!postId,
    }
  )
}

The error response is:

commons.js:46154 Error: Syntax Error: Expected :, found ): {"response":{"errors":[{"message":"Syntax Error: Expected :, found )","locations":[{"line":3,"column":46}]}],"status":400},"request":{"query":" query { post(id: 5fda109506038d9d18fa27e2) {
id heading content }
} "}} at GraphQLClient. (commons.js:13039) at step (commons.js:12930) at Object.next (commons.js:12911) at fulfilled (commons.js:12902)

I guess it's some syntax that I am getting wrong? Or could it have to do with the fact that now the quotation marks are missing? Though the example code also doesn't do anything differently... Really not sure anymore, but it's literally that one line that breaks it all and that I cannot figure out.

user_613932 · Answer

Your id 5fda109506038d9d18fa27e2 looks to be a string but you're not passing it as a string to your back end, which is why you're getting a syntax error.

It looks like this

query {
  post(id: 5fda109506038d9d18fa27e2) {
    id
    title
    body
  }
}

Notice how there aren't any quotation marks around the id? e.g. "5fda109506038d9d18fa27e2". You can also use integers as ids, I just want to make a point that you're not actually passing an integer. Read more on scalar types here.

I recommend you pass variables how they're intended by graphql rather than using string interpolation. This will help avoid this problem. Read more on variables in graphql here.

Here's an example of passing variables in graphql:

query Post($id: ID!) {
  post(id: $id) {
    id
    title
    body
  }
}

Here's how it would look using your code:

function usePost(postId) {
  return useQuery(
    ["post", postId],
    async () => {
      const { post } = await request(
        endpoint,
        gql`
          query Post($id: ID!) {
            post(id: $id) {
              id
              title
              body
            }
          }
        `,
        { id: postId }
      );
      return post;
    },
    {
      enabled: !!postId
    }
  );
}

Can't pass arguments in useQuery with React-Query + Graphql-Request

1 Answers