Urql Client and Fastify mercurius returns data as undefined in the React App

Question

I have a urql and fastify server that looks as follows:

import "reflect-metadata";
import "dotenv/config";
import _ from "node-env-types";
import Fastify from "fastify";
import mercurius from "mercurius";
import { buildSchema } from "type-graphql";
import { CtxType } from "./types";
// import { resolvers } from "./resolvers";
import { PrismaClient } from "@prisma/client";
import cors from "@fastify/cors";
_();

const schema = `
  type Query {
    add(x: Int, y: Int): Int
  }
`;

const resolvers = {
  Query: {
    add: async (_: any, { x, y }: { x: number; y: number }) => x + y,
  },
};

const PORT: any = process.env.PORT || 3001;
const HOST =
  process.env.NODE_ENV === "production"
    ? "0.0.0.0"
    : "localhost" || "127.0.0.1";

(async () => {
  const fastify = Fastify({
    logger: false,
    ignoreTrailingSlash: true,
  });

  const prisma = new PrismaClient();
  // const schema = await buildSchema({
  //   resolvers,
  //   validate: false,
  // });

  fastify.register(cors, {
    credentials: true,
    origin: "*",
  });
  fastify.register(mercurius, {
    context: (request, reply): CtxType => {
      return {
        request,
        reply,
        prisma,
      };
    },
    graphiql: true,
    schema,
    resolvers,
    errorHandler(error, request, reply) {
      console.error(error);
    },
  });

  fastify.listen({ port: PORT, host: HOST }, (error, address) => {
    if (error) {
      console.error(error);
      process.exit(1);
    }
    console.log(` Server is now listening on ${address}`);
  });
})();

Here is how i'm creating my client in the Next.js app

import React from "react";
import { createClient, Provider } from "urql";
export const url = "http://127.0.0.1:3001/graphql/";
export const client = createClient({
  url,
  fetchOptions: () => {
    const token = undefined;
    return {
      headers: { authorization: token ? `Bearer ${token}` : "" },
    };
  },
});

type Props = {
  children: React.ReactNode;
};
const UrqlProvider: React.FunctionComponent<Props> = ({ children }) => {
  return <Provider value={client}>{children}</Provider>;
};

export default UrqlProvider;

And i'm wrapping my _app.tsx with the UrqlProvider now if i try to make a add query in the pages/index.tsx as follows:

import { useHelloQuery } from "@/graphql/generated/graphql";
import styles from "@/styles/Home.module.css";
import { useQuery } from "urql";

const Home = () => {
  const [{ fetching, data, error }, reexecuteQuery] = useQuery({
    query: `{
      add(x: 10, y: 10)
    }`,
  });

  console.log(JSON.stringify({ fetching, data, error }, null, 2));
  return <div>{JSON.stringify({ fetching, data, error }, null, 2)} </div>;
};

export default Home;

Here is what i'm getting in the logs

{
  "fetching": false,
  "error": {
    "name": "CombinedError",
    "graphQLErrors": [],
    "networkError": {},
    "response": {}
  }
}

From this i can tell that data is undefined why am i not getting the data? does anyone have an idea why.

Urql Client and Fastify mercurius returns data as undefined in the React App

0 Answers0