How to separate GraphQL queries from string in URQL?

I am developing a GraphQL testing tool. Let's say I have an input field where users can write down the query and click on the run button to run the query.

query Message {
  messages {
    user
    content
  }
}


subscription RealtimeMessage {
  messages{
    content
    user
  }
}

mutation SendMessage {
  postMessage(user: "User ID", content: "Hi")
}

If there are multiple queries, I would like to show the user a dropdown to select the one to run. In the above example, we have 3 queries. If the user runs the query I would like to show a dropdown where the user will see 3 names Message, RealtimeMessage, SendMessage. And whichever user select I would like to pass that specific query to run.

I am using urql for GraphQL in my Vue project.