如何使用Uselazyquery将其退出加载？

Question

首先，大家好。我正在尝试通过GraphQl改善自己。通常，我可以通过调用usequery来显示我定义的get_characters变量。这里没有问题。但是我想显示与我在输入字段中输入的值相对应的数据。我为此使用了Uselazyquery。但这是问题。我输入文本，然后单击按钮。它一直保持加载。它不会切换到显示。我还研究了其他文章。我还在Uselazyquery中应用了所有提取物，但是结果并没有改变。我还尝试了NotifyOnnetworkStatusChange：True，但它也没有起作用。

感谢您的帮助。提前致谢。

import React, { useEffect, useState } from "react";
import { useQuery, gql, useLazyQuery } from "@apollo/client";
import Card from "./components/Card";

const GET_CHARACTERS = gql`
  query GetCharacterLocations($name: String!) {
    characters(filter: { name: $name }) {
      results {
        id
        name
        image
        location {
          name
        }
      }
    }
  }
`;

const App=()=> {
  const [name, setName] = useState("");
  const [getRickMorty, { loading, error, data, called }] = useLazyQuery(
    GET_CHARACTERS,
    {
      variables: { name },
    }
   );

  console.log({ data, loading, error });

  return (
    <div className="container">
        <input
          value={name}
          onChange={(e) => setName(e.target.value)}
        />

        <button
          onClick={() => {
            getRickMorty();
      }}
        >Search
        </button>

        {loading && <div>Loading</div>}
        {error && <div>Error</div>}

        {data?.characters?.results?.map((characters) => (
          <Card character={characters} />
        ))}
    </div>
  );
}

export default App;