使用 Apollo + Vue 进行异步调用

Posted 2023-03-10

【中文标题】使用 Apollo + Vue 进行异步调用

【英文标题】：Async calls with Apollo + Vue

【发布时间】：2021-02-11 17:25:15

【问题描述】：

目前，我正在尝试从我的服务器获取数据，但我遇到的问题是数据需要一点时间来获取（在邮递员中虽然它是瞬时的），比获取 DOM 的时间要长安装/加载，因此我得到错误（数据未定义）并且没有任何内容会加载到 DOM。

如果我在 DOM 完成挂载后 console.log 数据，那么我可以在控制台中看到它，但我无法找到解决方法，让组件等待数据被获取。

我尝试使用 v-if 语句，并以几种不同的方式编写它，但我仍然收到未定义数据的错误，并且在查询完成获取后它也不会加载。目前我已经将数据设置为首先等于null，它在JS中实际上是一个对象，并且在获取完成后它确实会填充数据。我可以在控制台中看到这一点。在此之前，我尝试了一个简单的 v-if="GameWeek"，并将 GameWeek 定义为一个空对象和一个空数组，但是这些都不起作用，并强制组件等待数据完成获取。

我的问题是，有什么方法可以异步执行此操作，或者更好的是，让组件等到数据被提取后再正确加载到 DOM 中？

这是我的组件的样子：

<template>
    <!--  Highest climber & longest fall -->
    <v-container>
        <v-card class="card-container mx-auto" v-if="GameWeek !== null" :v-for="player in GameWeek" :key="player.player_id">
            <!-- Top part of card -->
             <v-list-item three-line>
                <v-list-item-content>
                    <div class="card_top_section">
                        <v-avatar>
                            <img
                                src="https://cdn.vuetifyjs.com/images/john.jpg"
                                
                            >
                        </v-avatar>
                        <div class="ml-3">
                            <p class="cardText player_name">
                                  player.player_name  
                            </p>
                            <p class="cardText team_name">
                                 player.team_name 
                            </p>
                        </div>
                    </div>
                    
                    <div class="card_divs mt-7">
                        <p class="cardText points">
                        Points this week  player.points 
                        </p>
                       <!--  <p class="points_green points">
                            
                        </p> -->
                    </div>
                   <!--  Second Row Card -->
                    <div class="card_divs bottom_line">
                        <p class="cardText points">
                            Total points  player.total 
                        </p>
                       <!--  <p class="points_green points">
                            
                        </p> -->
                    </div>
                    
                </v-list-item-content>
             </v-list-item>
        </v-card>
    </v-container>      
</template>

<script>
    import gql from 'graphql-tag'
    export default 
        name: 'PlayerCard',
        data: () => 
            return 
                GameWeek: null
            
        ,
        apollo: 
            GameWeek: gql`query GameWeek 
                GameWeek 
                    team_id
                    points
                    player_name
                    rank
                    previous_rank
                    total
                    player_id
                    team_name
                
            `
        ,
        mounted() 
            console.log('This is the gameweek', this.GameWeek)
        ,
    
</script>

【参考方案1】：

好吧，事实证明，一旦我发现问题，这很容易解决。

它是 v-for 语句前面的 :。一旦删除它就一切正常:)