Vue3 displaying list data loop warning Unhandled error during execution of render function-CodePudding

I have Vue3 with apollo composable setup. I have for-loop data being displayed in a template that looks like this:

<template>
<div  style="margin:0 auto;">
    <ul >
        <li>
            <a >Tab1</a>
        </li>
        <li >
            <i ></i>
        </li>
        <li>
            <span >Tab2</span>
        </li>
    </ul>
    <div >
        <div>
            <div >Client List</div>

        </div>
        <div >
            <Button label="Add"  icon="pi pi-user-plus"  @click="openModal" />
        </div>

    </div>
<!-- for loop -->
    <p v-for="c in result.clients" :key="c.id">
        <b>{{ c.id}}</b>
    </p> 

</div>
</template>

There is no issues displaying the data and the code works but I get two errors in the browser:

[Vue warn]: Unhandled error during execution of render function 
  at <ClientsList onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App> 
  at <App> runtime-core.esm-bundler.js:38

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <ClientsList onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App> 
  at <App> runtime-core.esm-bundler.js:38

Commenting out the loop section of the code with the for loop makes the error disappear. The JavaScript in the .vue file looks like this:

import { getClients } from "@/graphql/query.js"
import { useQuery } from '@vue/apollo-composable'


export default {
    name: 'clients_list',
    setup(){
        const { result } = useQuery(getClients);
        return { result }
    },

Query data return to the variable result looks like this:

    {
      "data": {
        "clients": [
          {
            "id": "1",
            "name": "Test1"
          },
          {
            "id": "2",
            "name": "Test2"
          }
        ]
      }
    }

How do I get rid of the two warnings?

CodePudding user response：

Not familiar with VueApollo, but that might be suggesting that at some rendering cycle some Ref value is undefined but used in rendering (result.value?).

After taking a quick look at VueApollo, I believe the useQuery method is asynchronous (merely based on the fact that it can also report loading status) - it returns you a Ref for holding the result but the data will not be available at a later time when the request completes. I cannot reproduce exactly the same warning message as it seems that you have other things in your setup. But if result.value is populated asynchronously, it will cause issue initially:

example on Vue SFC Playground

Try to guard against the undefined and see if it helps:

<p v-for="c in result?.clients" :key="c.id">
    <b> {{ c.id }} </b>
</p>