urql TypeError：t.executeQuery 不是函数

Question

假设

• Node.js 20.14.0
• Next.js 14.2.3
• 乌尔格尔4.1.0
• @urql/核心5.0.4
• @urql/下一个1.1.1

主题

当我在 Next.js 的客户端组件中使用 Urql 时，收到此错误消息。

TypeError: t.executeQuery is not a function

请让我知道这个问题的原因。

代码如下

export function useGetEventByIdQuery(options: Omit<Urql.UseQueryArgs<Operations.GetEventByIdQueryVariables>, 'query'>) {
  return Urql.useQuery<Operations.GetEventByIdQuery, Operations.GetEventByIdQueryVariables>({ query: Operations.GetEventByIdDocument, . .options });
};

  const [data] = useGetEventByIdQuery({ variables: { id: params.id } }); }

• API修复
• 较低的urql版本

Answer 1

我也遇到过这个。按照 urql Next Documentation

上的说明进行操作

具体来说，这部分指的是上下文和提供者。

当我们不利用服务器组件时，我们将导入需要进行更多设置的内容，我们转到客户端组件的布局文件并将其结构如下。

// app/client/layout.tsx
'use client';

import { useMemo } from 'react';
import { UrqlProvider, ssrExchange, cacheExchange, fetchExchange, createClient } from '@urql/next';

export default function Layout({ children }: React.PropsWithChildren) {
  const [client, ssr] = useMemo(() => {
    const ssr = ssrExchange({
      isClient: typeof window !== 'undefined',
    });
    const client = createClient({
      url: 'https://trygql.formidable.dev/graphql/web-collections',
      exchanges: [cacheExchange, ssr, fetchExchange],
      suspense: true,
    });

    return [client, ssr];
  }, []);

  return (
    <UrqlProvider client={client} ssr={ssr}>
      {children}
    </UrqlProvider>
  );
}