在 Svelte 中获得 "TypeError ctx[0].data is undefined"

Question

我正在尝试使用 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>

Answer 1

遵循 Svelte Apollo Client 上的示例 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}

或者至少将您的 html 代码包装在 {#if $data.data} ... {/if}

之间

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

在 Svelte 中获得 "TypeError ctx[0].data is undefined"

Getting "TypeError ctx[0].data is undefined" in Svelte

graphql

apollo-server

svelte