add preload link

Author: dwwoelfel

src/App.js

@@ -8,7 +8,8 @@ import Posts from './Posts';
 import Post from './Post';
 import Comments from './Comments';
 import {onegraphAuth} from './Environment';
-import {Route, Link, Switch} from 'react-router-dom';
+import {Route, Switch} from 'react-router-dom';
+import Link from './PreloadLink';
 import idx from 'idx';
 import {NotificationContainer} from './Notifications';
 import OneGraphLogo from './oneGraphLogo';

src/Comments.js

@@ -93,7 +93,7 @@ function Comments({post, relay, postId}: Props) {
   return (
     <Box id="comments">
       {comments.map(comment => {
-        return <Comment comment={comment} />;
+        return <Comment key={comment.id} comment={comment} />;
       })}
       <PostBox>
         <Stack
@@ -163,6 +163,7 @@ export default createPaginationContainer(
           @connection(key: "Comments_post_comments") {
           edges {
             node {
+              id
               ...Comment_comment
             }
           }

src/Post.js

@@ -14,8 +14,7 @@ import EmojiIcon from './emojiIcon';
 import AddIcon from './addIcon';
 import Tippy, {TippyGroup} from '@tippy.js/react';
 import 'tippy.js/themes/light-border.css';
-import {Link} from 'react-router-dom';
-import {HashLink} from 'react-router-hash-link';
+import Link from './PreloadLink';
 import {postRootQuery} from './App';
 import GitHubLoginButton from './GitHubLoginButton';
 import {NotificationContext} from './Notifications';
@@ -371,9 +370,7 @@ const Post = ({relay, post}: Props) => {
             {formatDate(new Date(post.createdAt), 'MMM eo, yyyy')}
           </Text>
           <Text size="xsmall">
-            <HashLink to={`/post/${post.number}#comments`}>
-              view comments
-            </HashLink>
+            <Link to={`/post/${post.number}#comments`}>view comments</Link>
           </Text>
         </Box>
         <Text size="small">

src/PreloadLink.js

@@ -0,0 +1,30 @@
+// @flow
+
+import React from 'react';
+import {matchPath} from 'react-router-dom';
+import {HashLink} from 'react-router-hash-link';
+import {routes} from './App';
+import {fetchQuery} from 'react-relay';
+import {environment} from './Environment';
+
+async function runQueryForLink(to) {
+  for (const routeConfig of routes) {
+    const match = matchPath(to, routeConfig);
+    if (match) {
+      // Puts the query into the store
+      fetchQuery(
+        environment,
+        routeConfig.query,
+        routeConfig.getVariables(match),
+      );
+      break;
+    }
+  }
+}
+
+export default function PreloadLink(props: any) {
+  const preload = () => {
+    runQueryForLink(props.to);
+  };
+  return <HashLink onClick={preload} onMouseOver={preload} {...props} />;
+}