Specify query on found-relay route

app/javascript/packs/frontend/App.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {BrowserProtocol, queryMiddleware} from 'farce';
 import {createFarceRouter, createRender, Route, makeRouteConfig} from 'found';
 import {Resolver} from 'found-relay';
+import {graphql} from 'react-relay';
 
 import {hot} from 'react-hot-loader/root';
 
@@ -20,7 +21,23 @@ function App(): React.ReactElement {
   const routeConfig = makeRouteConfig(
     <Route Component={ApplicationLayout} path='/'>
       <Route Component={TestComponent} />
-      <Route Component={PokemonIndex} path='pokemon' />
+      <Route
+        Component={PokemonIndex}
+        path='pokemon'
+        query={graphql`
+          query AppPokemonIndexQuery {
+            pokemonConnection {
+              edges {
+                node {
+                  id
+                  ...Show_pokemon
+                }
+              }
+            }
+          }
+        `}
+      />
+
       <Route Component={PokemonCreate} path='pokemon/create' />
       <Route Component={NotFound} path='*' />
     </Route>

app/javascript/packs/frontend/__generated__/IndexQuery.graphql.ts → app/javascript/packs/frontend/__generated__/AppPokemonIndexQuery.graphql.ts

@@ -2,8 +2,8 @@
 
 import { ConcreteRequest } from "relay-runtime";
 import { Show_pokemon$ref } from "./Show_pokemon.graphql";
-export type IndexQueryVariables = {};
-export type IndexQueryResponse = {
+export type AppPokemonIndexQueryVariables = {};
+export type AppPokemonIndexQueryResponse = {
     readonly pokemonConnection: {
         readonly edges: ReadonlyArray<{
             readonly node: {
@@ -13,15 +13,15 @@ export type IndexQueryResponse = {
         } | null> | null;
     };
 };
-export type IndexQuery = {
-    readonly response: IndexQueryResponse;
-    readonly variables: IndexQueryVariables;
+export type AppPokemonIndexQuery = {
+    readonly response: AppPokemonIndexQueryResponse;
+    readonly variables: AppPokemonIndexQueryVariables;
 };
 
 
 
 /*
-query IndexQuery {
+query AppPokemonIndexQuery {
   pokemonConnection {
     edges {
       node {
@@ -52,7 +52,7 @@ return {
   "kind": "Request",
   "fragment": {
     "kind": "Fragment",
-    "name": "IndexQuery",
+    "name": "AppPokemonIndexQuery",
     "type": "Query",
     "metadata": null,
     "argumentDefinitions": [],
@@ -100,7 +100,7 @@ return {
   },
   "operation": {
     "kind": "Operation",
-    "name": "IndexQuery",
+    "name": "AppPokemonIndexQuery",
     "argumentDefinitions": [],
     "selections": [
       {
@@ -162,12 +162,12 @@ return {
   },
   "params": {
     "operationKind": "query",
-    "name": "IndexQuery",
+    "name": "AppPokemonIndexQuery",
     "id": null,
-    "text": "query IndexQuery {\n  pokemonConnection {\n    edges {\n      node {\n        id\n        ...Show_pokemon\n      }\n    }\n  }\n}\n\nfragment Show_pokemon on Pokemon {\n  id\n  iid\n  nickname\n  pokedexNumber\n}\n",
+    "text": "query AppPokemonIndexQuery {\n  pokemonConnection {\n    edges {\n      node {\n        id\n        ...Show_pokemon\n      }\n    }\n  }\n}\n\nfragment Show_pokemon on Pokemon {\n  id\n  iid\n  nickname\n  pokedexNumber\n}\n",
     "metadata": {}
   }
 };
 })();
-(node as any).hash = 'd0f65678ccc4dbf9f8b745dd0213a802';
+(node as any).hash = 'bd8d28f417b6cf2d9c83547f6107b4a8';
 export default node;

app/javascript/packs/frontend/components/pages/pokemon/Index.tsx

@@ -1,47 +1,19 @@
 import React from 'react';
-import {graphql, QueryRenderer, ReadyState} from 'react-relay';
 
-import {IndexQueryResponse} from '../../../__generated__/IndexQuery.graphql';
-import environment from '../../../graphqlEnvironment';
+import * as AppPokemonIndexQuery from '../../../__generated__/AppPokemonIndexQuery.graphql';
 import PokemonShow from './Show';
 
-function PokemonIndex(): React.ReactElement<void> {
+function PokemonIndex(props: AppPokemonIndexQuery.AppPokemonIndexQueryResponse): React.ReactElement<void> {
   return (
-    <QueryRenderer
-      environment={environment}
-      query={graphql`
-        query IndexQuery {
-          pokemonConnection {
-            edges {
-              node {
-                id
-                ...Show_pokemon
-              }
-            }
-          }
-        }
-      `}
-      render={({error, props}: ReadyState<IndexQueryResponse>): React.ReactNode => {
-        if (error) {
-          return <div>Error!</div>;
-        }
-        if (!props) {
-          return <div>Loading...</div>;
-        }
-        return (
-          <ul>
-            {props.pokemonConnection.edges.map(
-              (edge): React.ReactNode => (
-                <li key={edge.node.id}>
-                  <PokemonShow pokemon={edge.node} />
-                </li>
-              )
-            )}
-          </ul>
-        );
-      }}
-      variables={{}}
-    />
+    <ul>
+      {props.pokemonConnection.edges.map(
+        (edge): React.ReactNode => (
+          <li key={edge.node.id}>
+            <PokemonShow pokemon={edge.node} />
+          </li>
+        )
+      )}
+    </ul>
   );
 }