Upgrade dependencies to latest versions

Author: juffalow

package.json

@@ -3,15 +3,15 @@
   "version": "2.0.0",
   "private": true,
   "dependencies": {
-    "babel-plugin-relay": "^18.2.0",
+    "babel-plugin-relay": "^20.1.1",
     "bootstrap": "^5.1.3",
     "react": "^19.0.0",
     "react-bootstrap": "^2.4.0",
     "react-dom": "^19.0.0",
-    "react-relay": "^18.2.0",
+    "react-relay": "^20.1.1",
     "react-router-dom": "^7.4.1",
     "react-scripts": "5.0.1",
-    "relay-runtime": "^18.2.0"
+    "relay-runtime": "^20.1.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -39,21 +39,22 @@
   },
   "devDependencies": {
     "@babel/core": "^7.4.5",
-    "@types/node": "^22.5.0",
+    "@types/node": "^24.10.1",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "@types/react-relay": "^18.2.0",
+    "@types/react-relay": "^18.2.1",
     "@typescript-eslint/eslint-plugin": "^5.33.0",
     "@typescript-eslint/parser": "^5.33.0",
     "eslint": "^8.21.0",
     "graphql": "^16.10.0",
-    "relay-compiler": "^18.2.0",
+    "relay-compiler": "^20.1.1",
     "relay-compiler-language-typescript": "^15.0.0",
     "typescript": "^5.7.3"
   },
   "relay": {
     "src": "./src/",
     "schema": "./schema.graphql",
     "language": "typescript"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/pages/Home.tsx

@@ -11,7 +11,7 @@ const Home: FunctionComponent = () => (
       <Row>
         <Col>
           <h1>Quotes - React &amp; Relay example project</h1>
-          <p className="lead">The whole page is created with <a href="https://create-react-app.dev/" rel="noopener noreferrer" target="_blank">create-react-app</a> without eject. It uses newest version of <a href="https://reactjs.org/" rel="noopener noreferrer" target="_blank">React</a> (<i>19.0.0</i>) and <a href="https://relay.dev/" rel="noopener noreferrer" target="_blank">Relay</a> (<i>18.2.0</i>) that is now available (<i>10.1.2025</i>) and everything is coded in <a href="https://www.typescriptlang.org/" rel="noopener noreferrer" target="_blank">TypeScript</a>. You can find here how to use <code>useLazyLoadQuery</code>, <code>useFragment</code> and <code>usePaginationFragment</code>. Backend is available in <a href="https://github.com/juffalow/slim-graphql-eloquent-example" rel="noopener noreferrer" target="_blank">PHP</a> and <a href="https://github.com/juffalow/express-graphql-example" rel="noopener noreferrer" target="_blank">NodeJS</a>.</p>
+          <p className="lead">The whole page is created with <a href="https://create-react-app.dev/" rel="noopener noreferrer" target="_blank">create-react-app</a> without eject. It uses newest version of <a href="https://reactjs.org/" rel="noopener noreferrer" target="_blank">React</a> (<i>19.0.0</i>) and <a href="https://relay.dev/" rel="noopener noreferrer" target="_blank">Relay</a> (<i>20.1.0</i>) that is now available (<i>10.1.2025</i>) and everything is coded in <a href="https://www.typescriptlang.org/" rel="noopener noreferrer" target="_blank">TypeScript</a>. You can find here how to use <code>useLazyLoadQuery</code>, <code>useFragment</code> and <code>usePaginationFragment</code>. Backend is available in <a href="https://github.com/juffalow/slim-graphql-eloquent-example" rel="noopener noreferrer" target="_blank">PHP</a> and <a href="https://github.com/juffalow/express-graphql-example" rel="noopener noreferrer" target="_blank">NodeJS</a>.</p>
           <p>This project was created because of lot of hours spent searching, trying and debugging. There are several articles and projects about Relay, but those are mostly using older versions, or it is just a small sample of a code without other major parts. Here is a complete web application with everything you need to start using React, Relay and GraphQL.</p>
           <HomeContainer />
           <h2>Want to contribute?</h2>

src/pages/home/QuotesLoader.tsx

@@ -7,20 +7,16 @@ interface Props {
   count?: number;
 }
 
-const QuotesLoader = (props: Props) => (
+const QuotesLoader = ({ count = 9 }: Props) => (
   <Row className="mt-4">
     {
-      Array.apply(null, Array(props.count)).map((_, index) => (
+      Array.apply(null, Array(count)).map((_, index) => (
         <Col key={index} md={4} style={{ marginBottom: 20 }}>
           <Card className="bar-loader" style={{ minHeight: 125 }} />
         </Col>
       ))
     }
   </Row>
-)
-
-QuotesLoader.defaultProps = {
-  count: 3,
-}
+);
 
 export default QuotesLoader;