How to separate GraphQL queries from string in URQL?

Question

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.

score 0 · Answer 1 · answered Apr 23 '23 at 10:47

You can create a component that uses useQuery reactively based on a query that you pass in as a prop. Something like this:

<script setup lang="ts">
  import { useQuery } from '@urql/vue';
  import { DocumentNode } from 'graphql';
  import { PropType } from 'vue';

  const props = defineProps({
    query: { type: Object as PropType<DocumentNode>, required: true },
  });

  // result will be reactive
  const result = useQuery({
    query: props.query,    
  });
</script>

You have to pass in a DocumentNode as the query parameter - something like

gql`
query Message {
  messages {
    user
    content
  }
}`

See https://formidable.com/open-source/urql/docs/basics/vue/#run-a-first-query for more details on the reactive useQuery()

How to separate GraphQL queries from string in URQL?

1 Answers1