refactor: separate GQL queries from types, include API types

coursetable · May 13, 2024 · 62a743e · 62a743e
1 parent 325fe46
commit 62a743e
Show file tree

Hide file tree

Showing 17 changed files with 415 additions and 303 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/docs/graphql.md b/docs/graphql.md
@@ -106,7 +106,7 @@ On the frontend side, SDKs are all located in `src/generated`.
 4. Import the generated SDK in your frontend file:
 
    ```ts
-   import { useCourseMetadataQuery } from '../generated/graphql';
+   import { useCourseMetadataQuery } from '../queries/graphql-queries';
 
    const { data, loading, error } = useCourseMetadataQuery({
      variables: {

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -16,6 +16,7 @@ export default tseslint.config(
   {
     ignores: [
       'frontend/src/generated/',
+      'frontend/src/queries/graphql-queries.ts',
       'frontend/build',
       'patches/',
       'api/src/**/*.queries.ts',

diff --git a/frontend/graphql-codegen.ts b/frontend/graphql-codegen.ts
@@ -9,42 +9,47 @@ const config: CodegenConfig = {
   config: {
     // Prefer existing field because we put our override first
     onFieldTypeConflict: (existing: unknown) => existing,
+    avoidOptionals: true,
+    namingConvention: {
+      typeNames: 'change-case-all#pascalCase',
+      transformUnderscore: true,
+    },
+    scalars: {
+      float8: 'number',
+      json: 'object',
+      jsonb: 'object',
+      ...Object.fromEntries(
+        [
+          'Season',
+          'Crn',
+          'ExtraInfo',
+          'StringArr',
+          'NumberArr',
+          'TimesByDay',
+          'ProfessorInfo',
+        ].map((type) => [type, `../queries/graphql-types#${type}`]),
+      ),
+    },
+    inlineFragmentTypes: 'combine',
   },
   generates: {
-    'src/generated/graphql.ts': {
-      documents: ['src/queries/queries.graphql'],
-      plugins: [
-        'typescript',
-        'typescript-operations',
-        'typescript-react-apollo',
+    'src/generated/graphql-types.ts': {
+      documents: [
+        '../api/src/catalog/catalog.queries.graphql',
+        'src/queries/graphql-queries.graphql',
       ],
-      config: {
-        avoidOptionals: true,
-        namingConvention: {
-          typeNames: 'change-case-all#pascalCase',
-          transformUnderscore: true,
-        },
-        scalars: {
-          float8: 'number',
-          json: 'object',
-          jsonb: 'object',
-          ...Object.fromEntries(
-            [
-              'Season',
-              'Crn',
-              'ExtraInfo',
-              'StringArr',
-              'NumberArr',
-              'TimesByDay',
-              'ProfessorInfo',
-            ].map((type) => [type, `../queries/graphql-types#${type}`]),
-          ),
-        },
-        inlineFragmentTypes: 'combine',
+      plugins: ['typescript', 'typescript-operations'],
+    },
+    'src/queries/graphql-queries.ts': {
+      preset: 'import-types',
+      documents: ['src/queries/graphql-queries.graphql'],
+      plugins: ['typescript-react-apollo'],
+      presetConfig: {
+        typesPath: '../generated/graphql-types',
       },
     },
     'src/generated/graphql.schema.json': {
-      documents: ['src/queries/queries.graphql'],
+      documents: ['src/queries/graphql-queries.graphql'],
       plugins: ['introspection'],
     },
   },

diff --git a/frontend/package.json b/frontend/package.json
@@ -8,7 +8,7 @@
     "serve": "vite preview",
     "start": "vite",
     "test": "vite test",
-    "codegen": "cp ../api/static/*.json src/generated && bunx --bun graphql-codegen --config graphql-codegen.ts && prettier -w src/generated"
+    "codegen": "cp ../api/static/*.json src/generated && bunx --bun graphql-codegen --config graphql-codegen.ts && prettier -w src/generated src/queries/graphql-queries.ts"
   },
   "dependencies": {
     "@apollo/client": "^3.10.1",

diff --git a/frontend/src/components/CourseModal/CourseModalEvaluations.tsx b/frontend/src/components/CourseModal/CourseModalEvaluations.tsx
@@ -3,7 +3,7 @@ import { Row, Col, Modal } from 'react-bootstrap';
 import EvaluationRatings from './EvaluationRatings';
 import EvaluationResponses from './EvaluationResponses';
 
-import { useSearchEvaluationNarrativesQuery } from '../../generated/graphql';
+import { useSearchEvaluationNarrativesQuery } from '../../queries/graphql-queries';
 import type { Crn, Season } from '../../queries/graphql-types';
 import Spinner from '../Spinner';
 

diff --git a/frontend/src/components/CourseModal/CourseModalOverview.tsx b/frontend/src/components/CourseModal/CourseModalOverview.tsx
@@ -5,7 +5,7 @@ import OverviewInfo from './OverviewInfo';
 import OverviewRatings from './OverviewRatings';
 
 import { useUser } from '../../contexts/userContext';
-import { useSameCourseOrProfOfferingsQuery } from '../../generated/graphql';
+import { useSameCourseOrProfOfferingsQuery } from '../../queries/graphql-queries';
 import Spinner from '../Spinner';
 import './react-multi-toggle-override.css';
 

diff --git a/frontend/src/components/CourseModal/EvaluationRatings.tsx b/frontend/src/components/CourseModal/EvaluationRatings.tsx
@@ -1,5 +1,5 @@
 import RatingsGraph from './RatingsGraph';
-import type { SearchEvaluationNarrativesQuery } from '../../generated/graphql';
+import type { SearchEvaluationNarrativesQuery } from '../../generated/graphql-types';
 import { evalQuestionTags } from '../../utilities/constants';
 import { TextComponent } from '../Typography';
 import styles from './EvaluationRatings.module.css';

diff --git a/frontend/src/components/CourseModal/EvaluationResponses.tsx b/frontend/src/components/CourseModal/EvaluationResponses.tsx
@@ -3,7 +3,7 @@ import * as Sentry from '@sentry/react';
 import clsx from 'clsx';
 import { Tab, Tabs } from 'react-bootstrap';
 import Mark from 'mark.js';
-import type { SearchEvaluationNarrativesQuery } from '../../generated/graphql';
+import type { SearchEvaluationNarrativesQuery } from '../../generated/graphql-types';
 import { evalQuestionTags } from '../../utilities/constants';
 import { truncatedText } from '../../utilities/course';
 import { Input, TextComponent } from '../Typography';

diff --git a/frontend/src/components/CourseModal/OverviewInfo.tsx b/frontend/src/components/CourseModal/OverviewInfo.tsx
@@ -16,7 +16,7 @@ import responsiveHOC from 'react-lines-ellipsis/lib/responsiveHOC';
 
 import { CUR_SEASON } from '../../config';
 import { useSearch } from '../../contexts/searchContext';
-import type { SameCourseOrProfOfferingsQuery } from '../../generated/graphql';
+import type { SameCourseOrProfOfferingsQuery } from '../../generated/graphql-types';
 import type { Weekdays } from '../../queries/graphql-types';
 import { ratingColormap } from '../../utilities/constants';
 import {

diff --git a/frontend/src/components/CourseModal/OverviewRatings.tsx b/frontend/src/components/CourseModal/OverviewRatings.tsx
@@ -18,7 +18,7 @@ import { useUser } from '../../contexts/userContext';
 import type {
   RelatedCourseInfoFragment,
   SameCourseOrProfOfferingsQuery,
-} from '../../generated/graphql';
+} from '../../generated/graphql-types';
 import { generateRandomColor } from '../../utilities/common';
 import { ratingColormap, workloadColormap } from '../../utilities/constants';
 import { toSeasonString, isDiscussionSection } from '../../utilities/course';