1

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

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

4

1 回答 1

2

好的，我找到了

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

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 的返回是数据，我忘记分配了。

谢谢

于 2020-12-21T23:17:13.610 回答