使用 react-query (useQuery) 和 Storybook 出错答案

【问题标题】：Use react-query (useQuery) with Storybook getting error使用 react-query (useQuery) 和 Storybook 出错
【发布时间】：2020-09-15 20:34:29
【问题描述】：

我正在使用 storybook 单独开发我的 react 组件。我在将 react-query (useQuery) 与 storybook 一起使用时遇到了问题。在应用程序中实现该组件，我没有收到任何错误，并且一切正常。

async function searchStationsByCallLetter(_, param) {
  const request = {
    callLettersView: param, 
  };

  const { data } = await ApiService().makeApiCall(API_ENDPOINTS.BROADCAST_LINEUP.SEARCH_STATIONS, request, HTTP_POST);
  return data;
}

export default function useSearchStationsByCallLetter(inputValue = '') {
  return useQuery(['searchStationsByCallLetter', inputValue], searchStationsByCallLetter);

我有一个自定义反应钩子 useSearchStationsByCallLetter 返回 useQuery 钩子。 React-query 应该使用 searchStationsByCallLetter 作为 api 调用。 ApiService 和 makeApiCall 是自定义 axios 设置。

我在故事书中遇到的错误是：

TypeError: Object(...) is not a function
    at _callee$ (AddLineupHooks.js:8)
    at tryCatch (runtime.js:63)
    at Generator.invoke [as _invoke] (runtime.js:293)
    at Generator.next (runtime.js:118)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)
    at asyncToGenerator.js:32
    at new Promise (<anonymous>)
    at Object.<anonymous> (asyncToGenerator.js:21)
    at Object.searchStationsByCallLetter [as queryFn] (AddLineupHooks.js:8)

【问题讨论】：

标签： javascript reactjs storybook react-query

【解决方案1】：

使用 msw 的库模拟 Api 请求可能会帮助您获得您可能期望的自定义响应。

【讨论】：