在 Svelte 中获取“TypeError ctx[0].data is undefined”答案

【问题标题】：Getting "TypeError ctx[0].data is undefined" in Svelte在 Svelte 中获取“TypeError ctx[0].data is undefined”
【发布时间】：2021-11-03 14:28:07
【问题描述】：

我正在尝试使用 Apollo Server 开始使用 GraphQL 和 Svelte，但我得到的只是这个错误“ctx[random number].data is undefined”。我也尝试过 svelte {#async} 但遇到了同样的错误。我做错了什么以及如何使它起作用？

    <script>
  import { InMemoryCache } from "@apollo/client/core";
  import { SvelteApolloClient } from "svelte-apollo-client";
  import { gql } from "@apollo/client/core";

  const client = new SvelteApolloClient({
    uri:
      "https://graphql.contentful.com/content/v1/spaces/4x1ftgol5cf4/explore?access_token=VhWS6Pydw4xIoh0-bo2b7ANxmHxj_698UMVpy8JfmkY",
    cache: new InMemoryCache()
  });

  let data = client.query(gql`
    query {
      mellunarModaCollection {
        items {
          sys {
            id
          }
          title
          price
          img {
            url
          }
          off
        }
      }
    }
  `);
</script>

<style>
</style>
<ul>
      {#each $data.data.mellunarModaCollection.items as item}
        <li>
          <h2>{item.title}</h2>
          <h4>{item.price}</h4>
          <img src={item.img.url} alt={item.title} />
        </li>
      {/each}
    </ul>

【问题讨论】：

标签： graphql svelte apollo-server

【解决方案1】：

按照 Svelte Apollo 客户端 page 上的示例进行操作

{#if $data.loading }
  Loading...
{:else if $data.error}
  Error {$data.error.message}
{:else}
  <ul>
    {#each $data.data.mellunarModaCollection.items as item}
      <li>
        <h2>{item.title}</h2>
        <h4>{item.price}</h4>
        <img src={item.img.url} alt={item.title} />
      </li>
    {/each}
  </ul>
{/if}

或者至少在{#if $data.data} ... {/if}之间包装你的html代码

这里ctx[random number]对应$data，错误是$data.data未定义。它是未定义的，因为查询还没有时间运行。

【讨论】：