vue.js 如何在URQL中分离GraphQL查询和字符串？

b5buobof 于 2023-05-01 发布在 Vue.js

关注(0)|答案(1)|浏览(144)

我正在开发GraphQL测试工具。假设我有一个输入字段，用户可以在其中写下查询并单击Run按钮来运行查询。

query Message {
  messages {
    user
    content
  }
}

subscription RealtimeMessage {
  messages{
    content
    user
  }
}

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

如果有多个查询，我想向用户显示一个下拉菜单来选择要运行的查询。在上面的例子中，我们有3个查询。如果用户运行查询，我想显示一个下拉列表，用户将看到3个名称Message，RealtimeMessage，SendMessage。无论用户选择哪一个，我都希望传递该特定查询来运行。
我在Vue项目中使用urql for GraphQL。

vue.js

来源：https://stackoverflow.com/questions/73634563/how-to-separate-graphql-queries-from-string-in-urql

1条答案

按热度按时间

gijlo24d1#

您可以创建一个组件，该组件基于您作为prop传入的查询来React性地使用useQuery。就像这样：

<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>

您必须传入DocumentNode作为查询参数-类似于

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

参见 www.example.com 了解更多关于响应式useQuery（）的细节

赞(0）回复(0）举报 2023-05-01

我来回答

vue.js 如何在URQL中分离GraphQL查询和字符串？

1条答案

相关问题

热门标签

最新问答