SWR 未从 fetcher 填充数据，卡在加载中

问题描述

我使用 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","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 从未填充过。

为什么会发生这种情况以及如何解决这个问题？

解决方法

好的，我找到了

这是我的错，我忘记这是破坏

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返回的是数据，忘记赋值了。

谢谢