Query causing infinite loop

[Utkarshbhimte]

I have two models User and Course, and both are linked via Subscription. This is my Prisma schema

model User {
  id             String         @id @default(cuid())
  createdAt      DateTime       @default(now())
  modifiedAt     DateTime       @default(now())
  email          String         @unique
  courses        Course[]
  subscriptions  Subscription[]
}

model Course {
  id                     String         @id @default(cuid())
  createdAt              DateTime       @default(now())
  modifiedAt             DateTime       @default(now())
  title                  String
  users                  User[]
  subscribers            Subscription[]
}

model Subscription {
  id         String   @id @default(cuid())
  createdAt  DateTime @default(now())
  modifiedAt DateTime @default(now())
  course     Course?  @relation(fields: [courseId], references: [id])
  courseId   String?
  user       User?    @relation(fields: [userId], references: [id])
  userId     String?
  data   Json 
}

I have a parent component just querying for user data and then I have a child component querying for all the subscription for the currentUser

query GetAllSubscribedCourses {
  currentUser {
    subscriptions {
      id
      course {
        title
      }
    }
  }
}

The hook generated from this Graphql query is causing an infinite loop where both the APIs are being called simultaneously.

urql version & exchanges: 2.0.1

This is the hook generated by nexus out of it

export function useGetAllSubscribedCoursesQuery(options: Omit<Urql.UseQueryArgs<GetAllSubscribedCoursesQueryVariables>, 'query'> = {}) {
  return Urql.useQuery<GetAllSubscribedCoursesQuery>({ query: GetAllSubscribedCoursesDocument, ...options });
};

Any idea what I am doing wrong here? Any help would be appreciated

[JoviDeCroock]

What are you passing in into the options? Is any of those an unmemoized context object by any chance?

[Utkarshbhimte]

I am sending nothing in options.

import React from "react";
import { useGetAllSubscribedCoursesQuery } from "../graphql/getAllSubscribedCourses.generated";
import { SubbedCourseCard } from "./SubbedCourseCard";

const SubbedCourseGrid = () => {
  const [{ data, fetching, error }] = useGetAllSubscribedCoursesQuery();
  return (
    <div className="grid gap-4 grid-cols-3">
      {data?.currentUser?.subscriptions.map((subscription) => (
        <SubbedCourseCard key={subscription.id} subscription={subscription} />
      ))}
    </div>
  );
};

export default React.memo(SubbedCourseGrid);

[JoviDeCroock]

What is the second query, you seem to talk about two queries but we're only getting the example of one. For the sake of completeness could you provide us with the full scenario that occurs 😅

[Utkarshbhimte]

Sure, I understand. It's confusing to me as this is the first project I am using all this in. Thanks for your patience.

the parent query is this

query GetCurrentUser {
  currentUser {
    id
    name
    email
    displayPicture
    courses {
      id
      title
      users {
        displayPicture
      }
    }
  }
}

and this is the generated hook by nexus

export function useGetCurrentUserQuery(options: Omit<Urql.UseQueryArgs<GetCurrentUserQueryVariables>, 'query'> = {}) {
  return Urql.useQuery<GetCurrentUserQuery>({ query: GetCurrentUserDocument, ...options });
};

[kitten]

where both the APIs are being called simultaneously

what do you mean by both APIs?

[Utkarshbhimte]

I mean REST API requests.

On the page component,
there is one request from the parent component calling for user data.
and another call is from the child requesting all the courses of that user.

[kitten]

Ok, but this is GraphQL so it's not REST requests; have you checked whether the updates trigger each other? without any code cwe really can't tell what's going on. So you have two queries I assume, one triggers the other infinitely, it sounds like something's misconfigured or misused and you have a weird interaction loop

[Utkarshbhimte]

this is GraphQL so it's not REST requests

Understood. I'm new so the terms are still a little bit confusing to me.

have you checked whether the updates trigger each other?

Yes, I removed the parent component, the infinite loop is still there.
but when I remove the GetAllSubscribedCourses hook, no loop.

[Utkarshbhimte]

If you have some time, I can share repo access with you to provide the full picture here.

[Utkarshbhimte]

This is my nexus file.

import { extendType, objectType, stringArg } from "nexus";
import prisma from "../../db/prisma";

const Subscription = objectType({
  name: "Subscription",
  definition(t) {
    t.model.id();
    t.model.course();
    t.model.user();
  },
});

const queries = extendType({
  type: "Query",
  definition: (t) => {
    t.field("subscription", {
      type: "Subscription",
      args: {
        courseId: stringArg(),
      },
      resolve: async (_, { courseId }, ctx) => {
        if (!ctx.user?.id) return null;

        const course = await prisma.subscription.findFirst({
          where: {
            userId: ctx.user.id,
            courseId: courseId as string,
          },
        });

        if (!course) return null;

        return course;
      },
    });
  },
});

const mutations = extendType({
  type: "Mutation",
  definition: (t) => {
    return null;
  },
});

export default [Subscription, mutations, queries];