NextJS 动态路由不解析 GraphQL 异步请求

Question

我有像 localhost:3000/[username] 这样的动态链接。我查询一个 mongodb。如果数据库中存在用户名

FooBar

，那么它将解析；否则，它会说 User {slug} Not Found.

我能够验证我的 graphQL 查询是否正常工作。使用 getUser() 请求 Foobar 返回用户名字符串设置为 Foobar 的用户对象。无效用户返回 null。我相信这不是问题所在。我认为问题是在 UseEffect 中错误地使用了异步方法。我有

console.log(fetchData)

设置，它从不登录我的控制台，向我指示

fetchData()

方法从未被调用。这是指南我试图遵循以避免这个问题。

这是我的代码：

import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import { getUser } from '@/lib/users';
import {subscribe} from "graphql";

const UserPage = () => {
  const router = useRouter();
  const { slug } = router.query;
  const [isValidUser, setIsValidUser] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      console.log(fetchData)
      let result;
      if (slug === undefined || slug == null) {
        result = null;
      } else {
        result = Array.isArray(slug) ? slug[0] : slug;
        const user = await getUser(result);
        if (user) {
          setIsValidUser(true);
        }
      }
      return result;
    }


    if (slug) {
      fetchData().catch(console.error);
    }
  }, [slug]);

  return (
    <>
      {isValidUser ? (
        <p>User {slug} found!</p>
      ) : (
        <p>User {slug} not found.</p>
      )}
    </>
  );
};

export default UserPage;

一些旁注：我正在使用 NextJS、mongoDb 和 NextAuth 来验证用户的身份，而不是数据库。

编辑：为了更好的衡量，这里是 gql 查询：

import { apolloClient } from "@/pages/_app";
import { GET_USER_BY_USERNAME_OR_ADDRESS } from "../db/queries/userQueries";
import { ADD_USER } from "../db/mutations/userMutations";

const GET_USER_BY_USERNAME_OR_ADDRESS = gql`
  query GetUserByUsernameOrAddress($usernameOrAddress: String) {
    getUserByUsernameOrAddress(usernameOrAddress: $usernameOrAddress) {
      address
      bio
      username
    }
  }
`;

const getUser = async (addressOrUsername: string) => {
  try {
    const { data } = await apolloClient.query({
      query: GET_USER_BY_USERNAME_OR_ADDRESS,
      variables: { addressOrUsername },
    });
    if ( data ){
      return data;
    } else {
      return null;
    }
  } catch (error) {
    console.error(error);
  }
  return false;
};