useQuery直接使用honojs client报错: TypeError: Cannot read properties of undefined (reading 'replace')

2024-06-06 约 610 字预计阅读 2 分钟次阅读

useQuery直接使用honojs client报错: TypeError: Cannot read properties of undefined (reading ‘replace’)

最近开发了一个项目, 使用nextjs, honojs, drizzle-orm, 部署在cloudflare pages上, 因为honojs对于边缘计算比较友好,所以采用.

honojs 查询接口定义

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


export const runtime = 'edge';

type Bindings = {
    DB: D1Database;
};

const app = new Hono<{ Bindings: Bindings }>()
  .get('/', async (c) => {
    try {
      const conditions: Record<string, any> = {};
      const results = await getDb().query.someTable.findMany({});
      return c.json(results);
      // return c.json(resultData);
    } catch (error: Error | any) {
      console.error(error);
      return c.json(error);
    }
  });

export default app;

hono app的route设置

1
2
3
4
5
6
7


const app = new Hono<{ Bindings: Bindings }>().basePath('/api');
const routes = app.route('/sometable', someTable);

export const GET = handle(app);
export const POST = handle(app);

export type AppType = typeof routes;

useQuery 调用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


export const useGetSomeTable = () => {
  const query = useQuery({
    queryKey: ['someTable'], // 使用 filters 作为查询键
    queryFn: async () => {
      const response = await client.api.someTable.$get();
      console.log('API Response: ', response);
      if (!response.ok) {
        throw new Error('Failed to fetch sometable');
      }
      return response.json();
    },
    throwOnError: true,
      refetchOnWindowFocus: false,
      staleTime: 1000 * 60 * 5,
  });

  return query;
};

调用时报错

1

TypeError: Cannot read properties of undefined (reading 'replace')

问题出在: const response = await client.api.someTable.$get(); 这里. 调了两天, chatgpt问了, gemini pro问了,试了好多方法,没有结果.

正要放弃时,又回去看了视频教程: https://www.youtube.com/watch?v=N_uNKAus0II&t=23162s, 我是照着来的, 突然发现一个东西:

1

export const client = hc<AppType>(process.env.NEXT_PUBLIC_APP_URL!);

一去检查发现, 我在wrangler.toml中定义了NEXT_PUBLIC_APP_URL, 但是我是bun dev本地启动的, 在.env文件中没有, 于是在.env中增加NEXT_PUBLIC_APP_URL="http://localhost:3000".

结果

好了, 没有这个变量, hono/client/hc 输入一个undefined 他也不会报错,太奇怪. 记录一下, 喜欢遇到同样问题的人有帮助.

目录