useQuery doesn't render when refreshing because data is undefined

I am using a query on GraphQL for editing a user profile with formik. I access this page with the Router of next.js. When I get to the page through the router object the query seems to function normally and fetch the data of the query with useQuery. But when I refresh the page data is undefined and it doesn't render anything. I tried assigning defaults to data but doesn't work either.

I would think that the if(loading) is preventing from fetching the data and returning undefined in this case. I want to remark that when being redirected I don't have this problem. Only when I refresh. On the Network tab, I get a 400

I am also generating this page dynamically with a [pid].js so I am redirecting to a path '/editclient/[pid]'.

Here is the code

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>
    );
};