Move GraphQL queries to separate files

Author: chenaski

codegen.yml

@@ -1,6 +1,6 @@
 overwrite: true
 schema: "http://localhost:4000"
-documents: "src/**/*.tsx"
+documents: "src/**/*.graphql"
 generates:
   src/generated/graphql.tsx:
     plugins:

graphql.schema.json

@@ -1384,7 +1384,11 @@
         "name": "cacheControl",
         "description": null,
         "isRepeatable": false,
-        "locations": ["FIELD_DEFINITION", "OBJECT", "INTERFACE"],
+        "locations": [
+          "FIELD_DEFINITION",
+          "OBJECT",
+          "INTERFACE"
+        ],
         "args": [
           {
             "name": "maxAge",
@@ -1416,7 +1420,11 @@
         "name": "include",
         "description": "Directs the executor to include this field or fragment only when the `if` argument is true.",
         "isRepeatable": false,
-        "locations": ["FIELD", "FRAGMENT_SPREAD", "INLINE_FRAGMENT"],
+        "locations": [
+          "FIELD",
+          "FRAGMENT_SPREAD",
+          "INLINE_FRAGMENT"
+        ],
         "args": [
           {
             "name": "if",
@@ -1440,7 +1448,11 @@
         "name": "skip",
         "description": "Directs the executor to skip this field or fragment when the `if` argument is true.",
         "isRepeatable": false,
-        "locations": ["FIELD", "FRAGMENT_SPREAD", "INLINE_FRAGMENT"],
+        "locations": [
+          "FIELD",
+          "FRAGMENT_SPREAD",
+          "INLINE_FRAGMENT"
+        ],
         "args": [
           {
             "name": "if",
@@ -1489,7 +1501,9 @@
         "name": "specifiedBy",
         "description": "Exposes a URL that specifies the behaviour of this scalar.",
         "isRepeatable": false,
-        "locations": ["SCALAR"],
+        "locations": [
+          "SCALAR"
+        ],
         "args": [
           {
             "name": "url",
@@ -1511,4 +1525,4 @@
       }
     ]
   }
-}
+}

src/App.tsx

@@ -1,62 +1,10 @@
 import React from "react";
 import "./App.css";
-import { gql } from "@apollo/client/core";
-import { useUsersQuery } from "./generated/graphql";
+import { useUsersListQuery } from "./generated/graphql";
 import { CreateUserForm } from "./CreateUserForm";
 
-const USER_FRAGMENT_GQL = gql`
-  fragment UserInfo on User {
-    id
-    name
-    username
-    email
-  }
-`;
-
-const USERS_GQL = gql`
-  query users {
-    users {
-      ...UserInfo
-    }
-  }
-  ${USER_FRAGMENT_GQL}
-`;
-
-const USER_GQL = gql`
-  query user($id: ID!) {
-    user(id: $id) {
-      ...UserInfo
-    }
-  }
-  ${USER_FRAGMENT_GQL}
-`;
-
-const CREATE_USER_GQL = gql`
-  mutation createUser($createUserInput: CreateUserInput!) {
-    createUser(createUserInput: $createUserInput) {
-      ...UserInfo
-    }
-  }
-  ${USER_FRAGMENT_GQL}
-`;
-
-const REMOVE_USER_GQL = gql`
-  mutation removeUser($id: ID!) {
-    removeUser(id: $id)
-  }
-`;
-
-const UPDATE_USER_GQL = gql`
-  mutation updateUser($id: ID!, $updateUserInput: UpdateUserInput!) {
-    updateUser(id: $id, updateUserInput: $updateUserInput) {
-      ...UserInfo
-    }
-  }
-  ${USER_FRAGMENT_GQL}
-`;
-
 function App() {
-  const { data, loading, error } = useUsersQuery();
+  const { data, loading, error } = useUsersListQuery();
 
   return (
     <div className="App">