javascript - SWR 不从 fetcher 填充数据，卡在加载中

Question

我使用 graphql 和 swr 来获取数据

这是我的抓取器:

FetcherHelper.js

const ENDPOINT = "/api/graphql";

const headers = { 'Content-Type': 'application/json' };

export default async function FetchHelper({query}) {

    const options = {
        headers: headers,
        method: 'POST',
        body: JSON.stringify({query})
    };
    const res = await fetch(ENDPOINT, options)
    const res_json = await res.json();
    if (res_json.errors) {
        throw (JSON.stringify(res_json.errors));
    }
    return res_json.data;
}

这就是我使用SWR的方式

const QUERY_GET_DATA = gql`
query GETDATA{
  getUsers{
    id
    first_name
    last_name
  }
}
`;

const getData = async (query) => {
  const response = await FetchHelper({query});
  console.log('get Data : ', response);
  return response;;
};

响应日志:

{
  "data": {
    "getUsers": [
      {
        "id": "6d9cb858-43e9-473e-84a4-7766095b",
        "first_name": null,
        "last_name": null
      },
      {
        "id": "7ce9a327-a4dd-43a3-af8d-53ee87e7",
        "first_name": null,
        "last_name": null
      }
    ]
  }
}

我在这样的组件中使用 SWR:

const { dataForForm, error } = useSWR(QUERY_GET_DATA, getData);
  if (error) return <div>failed to load</div>
  if (!dataForForm) return <div>loading...</div>
  console.log(dataForForm); <-- never executed

它卡在loading...

但它卡在加载中，dataForForm 从未填充。

为什么会这样，如何解决？

Answer 1

好的，我找到了

这是我的错，我忘了这是解构

const { data: dataForForm, error } = useSWR(QUERY_GET_DATA, getData);
  if (error) return <div>failed to load</div>
  if (!dataForForm) return <div>loading...</div>
  console.log(dataForForm); 

swr返回的是数据，忘记赋值了

谢谢