Request.vue 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <template>
  2. <div class="bg-primary flex p-4 top-0 z-10 sticky">
  3. <div class="space-x-2 flex-1 inline-flex">
  4. <input
  5. id="url"
  6. v-model="url"
  7. v-focus
  8. type="url"
  9. autocomplete="off"
  10. spellcheck="false"
  11. class="
  12. bg-primaryLight
  13. border border-divider
  14. rounded
  15. text-secondaryDark
  16. w-full
  17. py-2
  18. px-4
  19. hover:border-dividerDark
  20. focus-visible:bg-transparent focus-visible:border-dividerDark
  21. "
  22. :placeholder="$t('request.url')"
  23. @keyup.enter="onConnectClick"
  24. />
  25. <ButtonPrimary
  26. id="get"
  27. name="get"
  28. :label="!connected ? $t('action.connect') : $t('action.disconnect')"
  29. class="w-32"
  30. @click.native="onConnectClick"
  31. />
  32. </div>
  33. </div>
  34. </template>
  35. <script lang="ts">
  36. import { defineComponent, PropType } from "@nuxtjs/composition-api"
  37. import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
  38. import { GQLConnection } from "~/helpers/GQLConnection"
  39. import { getCurrentStrategyID } from "~/helpers/network"
  40. import { useReadonlyStream, useStream } from "~/helpers/utils/composables"
  41. import { gqlHeaders$, gqlURL$, setGQLURL } from "~/newstore/GQLSession"
  42. export default defineComponent({
  43. props: {
  44. conn: {
  45. type: Object as PropType<GQLConnection>,
  46. required: true,
  47. },
  48. },
  49. setup(props) {
  50. const connected = useReadonlyStream(props.conn.connected$, false)
  51. const headers = useReadonlyStream(gqlHeaders$, [])
  52. const url = useStream(gqlURL$, "", setGQLURL)
  53. const onConnectClick = () => {
  54. if (!connected.value) {
  55. props.conn.connect(url.value, headers.value as any)
  56. logHoppRequestRunToAnalytics({
  57. platform: "graphql-schema",
  58. strategy: getCurrentStrategyID(),
  59. })
  60. } else {
  61. props.conn.disconnect()
  62. }
  63. }
  64. return {
  65. url,
  66. connected,
  67. onConnectClick,
  68. }
  69. },
  70. })
  71. </script>