如何在 <script setup> 语法中显示来自 vue apollo 的返回数据

Question

我按照 Vue Apollo 中的本教程使用假 api https://www.apollographql.com/blog/frontend/getting-started-with-vue-apollo/ 检索数据。

然而，我有一个代码，我使用 <script setup></script> 而不是通常的 setup() 方法来放置所有东西。

在这种情况下，我应该如何返回关于我的元素的数据？

所以这是目前我的vue文件：

<script setup>
    import { storeToRefs } from 'pinia';
    import { useAuthStore, useUsersStore } from '@/stores';

    import gql from 'graphql-tag'
    import { useQuery } from '@vue/apollo-composable'

    const authStore = useAuthStore();
    const { user: authUser } = storeToRefs(authStore);

    const usersStore = useUsersStore();
    const { users } = storeToRefs(usersStore);

    usersStore.getAll();

    apollo: gql`
        query Characters {
            characters {
            results {
                id
                name
                image
            }
        }
    }
    `
    const { result, loading, error } = useQuery(CHARACTERS_QUERY);
}
</script>
<template>
    <div>
        <h1>Hi {{authUser?.firstName}}!</h1>
        <div v-if="users.loading" class="spinner-border spinner-border-sm"></div>
        <div v-if="users.error" class="text-danger">Error loading users: {{users.error}}</div>
        <p v-if="error">Something went wrong...</p>
        <p v-if="loading">Loading...</p>
        <p v-else v-for="character in result.characters.results" :key="character.id">
            {{ character.name }}
        </p>
        <div></div>
    </div>
</template>

然后我的 main.js 是：

import { createApp, provide, h } from 'vue';
import { createPinia } from 'pinia';

import App from './App.vue';
import { router } from './helpers';

// setup fake backend
import { fakeBackend } from './helpers';
fakeBackend();

import { ApolloClient, InMemoryCache } from '@apollo/client/core'
import { DefaultApolloClient } from '@vue/apollo-composable'
import { createApolloProvider } from '@vue/apollo-option'

const cache = new InMemoryCache()

const apolloClient = new ApolloClient({
  cache,
  uri: 'https://rickandmortyapi.com/graphql',
})

const apolloProvider = createApolloProvider({
  defaultClient: apolloClient,
})

const app = createApp({
  setup () {
    provide(DefaultApolloClient, apolloClient)
  },
  render: () => h(App),
})

app.use(apolloProvider)

app.use(createPinia());
app.use(router);

app.mount('#app');

使用<script setup></script> 显示此错误？

screenshot of error

Answer 1

好像你在复制粘贴时犯了错误。

替换这个：

    apollo: gql`
        query Characters {
            characters {
            results {
                id
                name
                image
            }
        }
    }
    `

有了这个：

const CHARACTERS_QUERY = gql`
        query Characters {
            characters {
            results {
                id
                name
                image
            }
        }
    }
    `