Start displaying some paginated stuff

frontend/.eslintrc.cjs

@@ -86,6 +86,12 @@ module.exports = {
       files: "./src/**/*.graphql",
       extends: ["plugin:@graphql-eslint/operations-recommended"],
       rules: {
+        "@graphql-eslint/known-fragment-names": "off",
+        "@graphql-eslint/no-unused-fragments": "off",
+        "@graphql-eslint/known-directives": [
+          "error",
+          { ignoreClientDirectives: ["connection", "refetchable"] },
+        ],
         // This rule is copied from the 'operations-recommended' config,
         // but without the 'Query' forbidden suffix on operations,
         // since it directly clashes with the relay operation naming convention
@@ -99,7 +105,6 @@ module.exports = {
               forbiddenSuffixes: [/* "Query", */ "Mutation", "Subscription"],
             },
             FragmentDefinition: {
-              style: "PascalCase",
               forbiddenPrefixes: ["Fragment"],
               forbiddenSuffixes: ["Fragment"],
             },

frontend/src/components/CompatSsoLogin.tsx

@@ -0,0 +1,36 @@
+// Copyright 2022 The Matrix.org Foundation C.I.C.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import type { CompatSsoLogin_login$key } from "./__generated__/CompatSsoLogin_login.graphql";
+import { graphql, useFragment } from "react-relay";
+
+type Props = {
+  login: CompatSsoLogin_login$key;
+};
+
+const CompatSsoLogin: React.FC<Props> = ({ login }) => {
+  const data = useFragment(
+    graphql`
+      fragment CompatSsoLogin_login on CompatSsoLogin {
+        id
+        redirectUri
+      }
+    `,
+    login
+  );
+
+  return <>{data.redirectUri}</>;
+};
+
+export default CompatSsoLogin;

frontend/src/components/CompatSsoLoginList.tsx

@@ -0,0 +1,48 @@
+// Copyright 2022 The Matrix.org Foundation C.I.C.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { graphql, useFragment } from "react-relay";
+import CompatSsoLogin from "./CompatSsoLogin";
+import { CompatSsoLoginList_user$key } from "./__generated__/CompatSsoLoginList_user.graphql";
+
+type Props = {
+  user: CompatSsoLoginList_user$key;
+};
+
+const CompatSsoLoginList: React.FC<Props> = ({ user }) => {
+  const data = useFragment(
+    graphql`
+      fragment CompatSsoLoginList_user on User {
+        compatSsoLogins(first: 10) {
+          edges {
+            node {
+              ...CompatSsoLogin_login
+            }
+          }
+        }
+      }
+    `,
+    user
+  );
+
+  return (
+    <div>
+      {data.compatSsoLogins.edges.map((n) => (
+        <CompatSsoLogin login={n.node} />
+      ))}
+    </div>
+  );
+};
+
+export default CompatSsoLoginList;

frontend/src/components/__generated__/CompatSsoLoginList_user.graphql.ts

@@ -0,0 +1,85 @@
+/**
+ * @generated SignedSource<<d3404a632e1928901a9a8ec12357528d>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { Fragment, ReaderFragment } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type CompatSsoLoginList_user$data = {
+  readonly compatSsoLogins: {
+    readonly edges: ReadonlyArray<{
+      readonly node: {
+        readonly " $fragmentSpreads": FragmentRefs<"CompatSsoLogin_login">;
+      };
+    }>;
+  };
+  readonly " $fragmentType": "CompatSsoLoginList_user";
+};
+export type CompatSsoLoginList_user$key = {
+  readonly " $data"?: CompatSsoLoginList_user$data;
+  readonly " $fragmentSpreads": FragmentRefs<"CompatSsoLoginList_user">;
+};
+
+const node: ReaderFragment = {
+  "argumentDefinitions": [],
+  "kind": "Fragment",
+  "metadata": null,
+  "name": "CompatSsoLoginList_user",
+  "selections": [
+    {
+      "alias": null,
+      "args": [
+        {
+          "kind": "Literal",
+          "name": "first",
+          "value": 10
+        }
+      ],
+      "concreteType": "CompatSsoLoginConnection",
+      "kind": "LinkedField",
+      "name": "compatSsoLogins",
+      "plural": false,
+      "selections": [
+        {
+          "alias": null,
+          "args": null,
+          "concreteType": "CompatSsoLoginEdge",
+          "kind": "LinkedField",
+          "name": "edges",
+          "plural": true,
+          "selections": [
+            {
+              "alias": null,
+              "args": null,
+              "concreteType": "CompatSsoLogin",
+              "kind": "LinkedField",
+              "name": "node",
+              "plural": false,
+              "selections": [
+                {
+                  "args": null,
+                  "kind": "FragmentSpread",
+                  "name": "CompatSsoLogin_login"
+                }
+              ],
+              "storageKey": null
+            }
+          ],
+          "storageKey": null
+        }
+      ],
+      "storageKey": "compatSsoLogins(first:10)"
+    }
+  ],
+  "type": "User",
+  "abstractKey": null
+};
+
+(node as any).hash = "b70f4b63784afe8f1f69c78198194cc9";
+
+export default node;

frontend/src/components/__generated__/CompatSsoLogin_login.graphql.ts

@@ -0,0 +1,50 @@
+/**
+ * @generated SignedSource<<bafb31541b97839f32ff9790773ff904>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { Fragment, ReaderFragment } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type CompatSsoLogin_login$data = {
+  readonly id: string;
+  readonly redirectUri: any;
+  readonly " $fragmentType": "CompatSsoLogin_login";
+};
+export type CompatSsoLogin_login$key = {
+  readonly " $data"?: CompatSsoLogin_login$data;
+  readonly " $fragmentSpreads": FragmentRefs<"CompatSsoLogin_login">;
+};
+
+const node: ReaderFragment = {
+  "argumentDefinitions": [],
+  "kind": "Fragment",
+  "metadata": null,
+  "name": "CompatSsoLogin_login",
+  "selections": [
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "id",
+      "storageKey": null
+    },
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "redirectUri",
+      "storageKey": null
+    }
+  ],
+  "type": "CompatSsoLogin",
+  "abstractKey": null
+};
+
+(node as any).hash = "e1151a93f1ba4a56332b8aa6129f7bfe";
+
+export default node;

frontend/src/pages/Home.tsx

@@ -14,6 +14,7 @@
 
 import { graphql, useLazyLoadQuery } from "react-relay";
 
+import CompatSsoLoginList from "../components/CompatSsoLoginList";
 import type { HomeQuery } from "./__generated__/HomeQuery.graphql";
 
 const Home: React.FC = () => {
@@ -23,6 +24,8 @@ const Home: React.FC = () => {
         currentUser {
           id
           username
+
+          ...CompatSsoLoginList_user
         }
       }
     `,
@@ -35,6 +38,7 @@ const Home: React.FC = () => {
         <h1 className="font-bold text-2xl">
           Hello {data.currentUser.username}!
         </h1>
+        <CompatSsoLoginList user={data.currentUser} />
       </>
     );
   } else {

frontend/src/pages/__generated__/HomeQuery.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<c45ed89e7a5d2dbfd7df09b342251f17>>
+ * @generated SignedSource<<94462aca9c48eae79c22a11003d865c3>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -9,11 +9,13 @@
 // @ts-nocheck
 
 import { ConcreteRequest, Query } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
 export type HomeQuery$variables = {};
 export type HomeQuery$data = {
   readonly currentUser: {
     readonly id: string;
     readonly username: string;
+    readonly " $fragmentSpreads": FragmentRefs<"CompatSsoLoginList_user">;
   } | null;
 };
 export type HomeQuery = {
@@ -22,40 +24,46 @@ export type HomeQuery = {
 };
 
 const node: ConcreteRequest = (function(){
-var v0 = [
+var v0 = {
-  {
+  "alias": null,
-    "alias": null,
+  "args": null,
-    "args": null,
+  "kind": "ScalarField",
-    "concreteType": "User",
+  "name": "id",
-    "kind": "LinkedField",
+  "storageKey": null
-    "name": "currentUser",
+},
-    "plural": false,
+v1 = {
-    "selections": [
+  "alias": null,
-      {
+  "args": null,
-        "alias": null,
+  "kind": "ScalarField",
-        "args": null,
+  "name": "username",
-        "kind": "ScalarField",
+  "storageKey": null
-        "name": "id",
+};
-        "storageKey": null
-      },
-      {
-        "alias": null,
-        "args": null,
-        "kind": "ScalarField",
-        "name": "username",
-        "storageKey": null
-      }
-    ],
-    "storageKey": null
-  }
-];
 return {
   "fragment": {
     "argumentDefinitions": [],
     "kind": "Fragment",
     "metadata": null,
     "name": "HomeQuery",
-    "selections": (v0/*: any*/),
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "User",
+        "kind": "LinkedField",
+        "name": "currentUser",
+        "plural": false,
+        "selections": [
+          (v0/*: any*/),
+          (v1/*: any*/),
+          {
+            "args": null,
+            "kind": "FragmentSpread",
+            "name": "CompatSsoLoginList_user"
+          }
+        ],
+        "storageKey": null
+      }
+    ],
     "type": "RootQuery",
     "abstractKey": null
   },
@@ -64,19 +72,80 @@ return {
     "argumentDefinitions": [],
     "kind": "Operation",
     "name": "HomeQuery",
-    "selections": (v0/*: any*/)
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "User",
+        "kind": "LinkedField",
+        "name": "currentUser",
+        "plural": false,
+        "selections": [
+          (v0/*: any*/),
+          (v1/*: any*/),
+          {
+            "alias": null,
+            "args": [
+              {
+                "kind": "Literal",
+                "name": "first",
+                "value": 10
+              }
+            ],
+            "concreteType": "CompatSsoLoginConnection",
+            "kind": "LinkedField",
+            "name": "compatSsoLogins",
+            "plural": false,
+            "selections": [
+              {
+                "alias": null,
+                "args": null,
+                "concreteType": "CompatSsoLoginEdge",
+                "kind": "LinkedField",
+                "name": "edges",
+                "plural": true,
+                "selections": [
+                  {
+                    "alias": null,
+                    "args": null,
+                    "concreteType": "CompatSsoLogin",
+                    "kind": "LinkedField",
+                    "name": "node",
+                    "plural": false,
+                    "selections": [
+                      (v0/*: any*/),
+                      {
+                        "alias": null,
+                        "args": null,
+                        "kind": "ScalarField",
+                        "name": "redirectUri",
+                        "storageKey": null
+                      }
+                    ],
+                    "storageKey": null
+                  }
+                ],
+                "storageKey": null
+              }
+            ],
+            "storageKey": "compatSsoLogins(first:10)"
+          }
+        ],
+        "storageKey": null
+      }
+    ]
   },
   "params": {
-    "cacheID": "ed11a3960d77e44416be48bbade86350",
+    "cacheID": "1b4d3469bb6ccc19b8944b1f7fedd9c5",
     "id": null,
     "metadata": {},
     "name": "HomeQuery",
     "operationKind": "query",
-    "text": "query HomeQuery {\n  currentUser {\n    id\n    username\n  }\n}\n"
+    "text": "query HomeQuery {\n  currentUser {\n    id\n    username\n    ...CompatSsoLoginList_user\n  }\n}\n\nfragment CompatSsoLoginList_user on User {\n  compatSsoLogins(first: 10) {\n    edges {\n      node {\n        ...CompatSsoLogin_login\n        id\n      }\n    }\n  }\n}\n\nfragment CompatSsoLogin_login on CompatSsoLogin {\n  id\n  redirectUri\n}\n"
   }
 };
 })();
 
-(node as any).hash = "9746f86ec5c6368af275e5eb2789bff7";
+(node as any).hash = "a5defd2dc81b62abebfe7a393573d5a8";
 
 export default node;