React Course lesson 25- Refactoring- Extracting a Query Object: Dependency cycles Code Smell

React
1

So in the react course in lesson 25 we end up with dependency cycle between App.tsx and GameGrid.tsx. We are importing from App.tsx the GameQuery Interface to be used as Props in GameGrid.tsx, and we are importing GameQuery component to be used in App.tsx.
Wouldn’t it be better to remove the gameQuery interface and isolate it in a separate file, or this is not considered a code smell?

2

I don’t think a type should be tied to a component unless it is used only in that component like Props. Same for hooks and services. I put my types in “@types/index.ts” so my imports are like

import { Game, Genre, Platform } from '../@types';

If the app were more complex with a lot of types I’d separate them into more specific files like game.ts and genre.ts or even put everything “Game” related in a game directory with it’s own ‘@types’ directory and still have ‘src/@types/index.ts’ for truly global types that might be used anywhere but not be related to games.

3

Here is my index.ts

export type Platform = {
  id: number;
  name: string;
  slug: string;
};

export type Game = {
  id: number;
  name: string;
  background_image: string;
  parent_platforms: { platform: Platform }[];
  metacritic: number;
  rating_top: number;
};

export type Genre = {
  id: number;
  name: string;
  image_background: string;
};

export type GameQuery = {
  genre: Genre;
  platform: Platform;
  sortOrder: string;
  searchText: string;
};

export type FetchResponse<T> = {
  count: number;
  results: T[];
};

By the way, I used type instead of interface because either one works here. There are discussions on the Internet about type vs interface. I’m just in a habit of using type for everything unless interface is required.