How to use the @vue/apollo-composable.useQuery function in @vue/apollo-composable

To help you get started, we’ve selected a few @vue/apollo-composable examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github metaspace2020 / metaspace / metaspace / webapp / src / modules / Datasets / common / VisibilityBadge.tsx View on Github external
setup(props) {
    const queryOptions = reactive({ enabled: false })
    const queryVars = computed(() => ({ id: props.datasetId }))
    const query = useQuery(datasetVisibilityQuery, queryVars, queryOptions)
    const loadVisibility = () => { queryOptions.enabled = true }

    const visibilityText = computed(() => {
      if (query.result.value != null) {
        const { datasetVisibility, currentUser } = query.result.value
        if (datasetVisibility != null) {
          const { submitter, group, projects } = datasetVisibility
          const submitterName = currentUser && submitter.id === currentUser.id ? 'you' : submitter.name
          const all = [
            submitterName,
            ...(group ? [group.name] : []),
            ...(projects || []).map(p => p.name),
          ]
          return 'These annotation results are not publicly visible. '
            + `They are visible to ${all.join(', ')} and METASPACE Administrators.`
        }
github metaspace2020 / metaspace / metaspace / webapp / src / modules / Datasets / list / DownloadDialog.tsx View on Github external
setup(props, { emit }) {
    const { datasetId } = toRefs(props)
    const {
      result: downloadLinkResult,
      loading,
    } = useQuery(getDatasetDownloadLink, { datasetId }, { fetchPolicy: 'no-cache' })
    const downloadLinks = computed(() => downloadLinkResult.value != null
      ? safeJsonParse(downloadLinkResult.value.dataset.downloadLinkJson)
      : null)

    return () => {
      let content
      if (loading.value) {
        content = <div class="h-64">
      } else if (downloadLinks.value == null) {
        content = <div><h1>Error</h1><p>This dataset cannot be downloaded.</p></div>
      } else {
        const { license, contributors, files } = downloadLinks.value
        const authorStr = contributors.length !== 1 ? 'authors' : 'author'
        content = (
          <div>
            <p></p></div></div>
github metaspace2020 / metaspace / metaspace / webapp / src / modules / MolecularDatabases / DatabaseDetailsView.tsx View on Github external
setup(props, { root }) {
    const { result, refetch, onResult } = useQuery(
      databaseDetailsQuery,
      { id: props.id },
      { fetchPolicy: 'no-cache' },
    )

    onResult(result =&gt; {
      if (result &amp;&amp; result.errors) {
        root.$message({ message: 'Sorry, something went wrong', type: 'error' })
        props.close()
      }
    })

    const state = reactive({
      showNewVersionDialog: false,
    })
github PECE-project / drupal-pece / src / front / graphql / composables / useGqlRoute.js View on Github external
export default function useRoute ({ query, variables }) {
  const { result, loading, error } = useQuery(query, variables)

  const data = useResult(result, null, (data) => {
    if (data.route) { return data.route }
    return null
  })

  return {
    data,
    loading,
    error
  }
}
github metaspace2020 / metaspace / metaspace / webapp / src / modules / MolecularDatabases / DatabasesTable.tsx View on Github external
setup(props) {
    const state = reactive({
      showUploadDialog: false,
    })

    const { result, loading, refetch } = useQuery(
      getGroupDatabasesQuery,
      { groupId: props.groupId },
      { fetchPolicy: 'no-cache' },
    )

    onBeforeMount(refetch)

    const onDialogClose = () => {
      state.showUploadDialog = false
    }

    const onUploadComplete = () => {
      onDialogClose()
      refetch()
    }
github PECE-project / drupal-pece / src / front / graphql / composables / useEssays.js View on Github external
export default function useEssays ({ query, variables }) {
  const { result, loading, error } = useQuery(query, variables)

  const essays = useResult(result, null, (data) => {
    if (data.peceEssays && data.peceEssays.items.length) { return data.peceEssays.items }
    return null
  })

  return {
    essays,
    loading,
    error
  }
}

@vue/apollo-composable

Apollo GraphQL for Vue Composition API

MIT
Latest version published 1 month ago

Package Health Score

94 / 100
Full package analysis