刷新时 useQuery 不呈现，因为数据未定义

Question

我在 GraphQL 上使用查询来使用 formik 编辑用户配置文件。我用next.js的Router访问这个页面。当我通过路由器对象到达页面时，查询似乎正常运行并使用 useQuery 获取查询的数据。但是当我刷新页面数据是未定义的，它不呈现任何东西。我尝试为数据分配默认值，但也不起作用。

在这种情况下，我认为 if(loading) 会阻止获取数据并返回 undefined。我想说的是，当被重定向时，我没有这个问题。只有当我刷新。在网络标签上，我得到一个 400

我还使用 [pid].js 动态生成此页面，因此我重定向到路径“/editclient/[pid]”。

这是代码

const EditClient = () => {
    // Get actual ID
    const router = useRouter();
    // Mutation to fetch data from client
    const {
        query: { id },
    } = router;
    // Get data from client
    const { loading, data, error } = useQuery(GET_CLIENT, {
        variables: {
            id,
        },
    });

    // Schema Validation
    const validationSchema = yup.object({
        name: yup.string().required("Name is required"),
        surname: yup.string().required("Surname is required"),
        email: yup.string().email("Email not valid").required('Email is required'),
        company: yup.string().required("Password is required"),
    });

    if(loading) return "Loading...";

    const {getClientById} = data;

    return (
        <Layout>
            <h1 className="text-center text-2xl text-white font-light">
                Edit Client
            </h1>
            <div className="flex justify-center mt-5">
                <div className="w-full max-w-sm">
                    <Formik
                        validationSchema={validationSchema}
                        enableReinitialize
                        initialValues={getClientById}
                        onSubmit={(values) => {
                            console.log(functions);
                        }}
                    >
                        {(props) => {
                            // console.log(props);
                            return (
                             ...
                            )
                        }}
                    </Formik>
                </div>
            </div>
        </Layout>
    );
};