add gql queries to fronted and test with getting agents + install material-tailwind UI library to use it to enhance the UI/UX

2024-02-21 23:00:02 +04:00
parent 961bd46470
commit 99ba3f1c2c
9 changed files with 664 additions and 21 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,10 @@
      "version": "0.1.0",
      "dependencies": {
        "@apollo/client": "^3.9.5",
+        "@apollo/experimental-nextjs-app-support": "^0.8.0",
        "@apollo/server": "^4.10.0",
        "@as-integrations/next": "^3.0.0",
+        "@material-tailwind/react": "^2.1.9",
        "@prisma/client": "^5.9.1",
        "graphql": "^16.8.1",
        "next": "14.1.0",
@@ -122,6 +124,21 @@
        }
      }
    },
+    "node_modules/@apollo/experimental-nextjs-app-support": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@apollo/experimental-nextjs-app-support/-/experimental-nextjs-app-support-0.8.0.tgz",
+      "integrity": "sha512-uyNIkOkew0T6ukC8ycbWBeTu8gtDSD5i+NVGEHU0DIEQaToFHObYcvIxaQ/8hvWzgvnpNU/KMsApfGXA9Xkpyw==",
+      "dependencies": {
+        "server-only": "^0.0.1",
+        "superjson": "^1.12.2 || ^2.0.0",
+        "ts-invariant": "^0.10.3"
+      },
+      "peerDependencies": {
+        "@apollo/client": "^3.9.0",
+        "next": "^13.4.1 || ^14.0.0",
+        "react": "^18"
+      }
+    },
    "node_modules/@apollo/protobufjs": {
      "version": "1.2.7",
      "resolved": "https://registry.npmjs.org/@apollo/protobufjs/-/protobufjs-1.2.7.tgz",
@@ -883,6 +900,21 @@
        "@jridgewell/sourcemap-codec": "^1.4.10"
      }
    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "optional": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "optional": true
+    },
    "node_modules/@eslint-community/eslint-utils": {
      "version": "4.4.0",
      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -939,6 +971,54 @@
        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
      }
    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
+      "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.1"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
+      "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
+      "dependencies": {
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.19.0.tgz",
+      "integrity": "sha512-fgYvN4ksCi5OvmPXkyOT8o5a8PSKHMzPHt+9mR6KYWdF16IAjWRLZPAAziI2sznaWT23drRFrYw64wdvYqqaQw==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^1.2.2",
+        "aria-hidden": "^1.1.3",
+        "tabbable": "^6.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-1.3.0.tgz",
+      "integrity": "sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.2.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
+      "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
+    },
    "node_modules/@graphql-tools/merge": {
      "version": "8.4.2",
      "resolved": "https://registry.npmjs.org/@graphql-tools/merge/-/merge-8.4.2.tgz",
@@ -1151,6 +1231,92 @@
        "@jridgewell/sourcemap-codec": "^1.4.14"
      }
    },
+    "node_modules/@material-tailwind/react": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/@material-tailwind/react/-/react-2.1.9.tgz",
+      "integrity": "sha512-3uPlJE9yK4JF9DEQO4I1QbjR8o05+4fysLqoZ0v38TDOLE2tvDRhTBVhn6Mp9vSsq5CoJOKgemG7kbkOFAji4A==",
+      "dependencies": {
+        "@floating-ui/react": "0.19.0",
+        "classnames": "2.3.2",
+        "deepmerge": "4.2.2",
+        "framer-motion": "6.5.1",
+        "material-ripple-effects": "2.0.1",
+        "prop-types": "15.8.1",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "tailwind-merge": "1.8.1"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
+    "node_modules/@material-tailwind/react/node_modules/deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@motionone/animation": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.17.0.tgz",
+      "integrity": "sha512-ANfIN9+iq1kGgsZxs+Nz96uiNcPLGTXwfNo2Xz/fcJXniPYpaz/Uyrfa+7I5BPLxCP82sh7quVDudf1GABqHbg==",
+      "dependencies": {
+        "@motionone/easing": "^10.17.0",
+        "@motionone/types": "^10.17.0",
+        "@motionone/utils": "^10.17.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/dom": {
+      "version": "10.12.0",
+      "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.12.0.tgz",
+      "integrity": "sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==",
+      "dependencies": {
+        "@motionone/animation": "^10.12.0",
+        "@motionone/generators": "^10.12.0",
+        "@motionone/types": "^10.12.0",
+        "@motionone/utils": "^10.12.0",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/easing": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.17.0.tgz",
+      "integrity": "sha512-Bxe2wSuLu/qxqW4rBFS5m9tMLOw+QBh8v5A7Z5k4Ul4sTj5jAOfZG5R0bn5ywmk+Fs92Ij1feZ5pmC4TeXA8Tg==",
+      "dependencies": {
+        "@motionone/utils": "^10.17.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/generators": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.17.0.tgz",
+      "integrity": "sha512-T6Uo5bDHrZWhIfxG/2Aut7qyWQyJIWehk6OB4qNvr/jwA/SRmixwbd7SOrxZi1z5rH3LIeFFBKK1xHnSbGPZSQ==",
+      "dependencies": {
+        "@motionone/types": "^10.17.0",
+        "@motionone/utils": "^10.17.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/types": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.17.0.tgz",
+      "integrity": "sha512-EgeeqOZVdRUTEHq95Z3t8Rsirc7chN5xFAPMYFobx8TPubkEfRSm5xihmMUkbaR2ErKJTUw3347QDPTHIW12IA=="
+    },
+    "node_modules/@motionone/utils": {
+      "version": "10.17.0",
+      "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.17.0.tgz",
+      "integrity": "sha512-bGwrki4896apMWIj9yp5rAS2m0xyhxblg6gTB/leWDPt+pb410W8lYWsxyurX+DH+gO1zsQsfx2su/c1/LtTpg==",
+      "dependencies": {
+        "@motionone/types": "^10.17.0",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
    "node_modules/@next/env": {
      "version": "14.1.0",
      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.1.0.tgz",
@@ -2028,6 +2194,17 @@
      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
      "dev": true
    },
+    "node_modules/aria-hidden": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz",
+      "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/aria-query": {
      "version": "5.3.0",
      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
@@ -2527,6 +2704,11 @@
        "node": ">= 6"
      }
    },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
    "node_modules/client-only": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -2611,6 +2793,20 @@
      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
    },
+    "node_modules/copy-anything": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",
+      "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
+      "dependencies": {
+        "is-what": "^4.1.8"
+      },
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
    "node_modules/cors": {
      "version": "2.8.5",
      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
@@ -3687,6 +3883,34 @@
        "url": "https://github.com/sponsors/rawify"
      }
    },
+    "node_modules/framer-motion": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
+      "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
+      "dependencies": {
+        "@motionone/dom": "10.12.0",
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "popmotion": "11.0.3",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8 || ^17.0.0 || ^18.0.0",
+        "react-dom": ">=16.8 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/framesync": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz",
+      "integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
    "node_modules/fresh": {
      "version": "0.5.2",
      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -4030,6 +4254,11 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+    },
    "node_modules/hoist-non-react-statics": {
      "version": "3.3.2",
      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -4466,6 +4695,17 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/is-what": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz",
+      "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==",
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
    "node_modules/isarray": {
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
@@ -4709,6 +4949,11 @@
      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
    },
+    "node_modules/material-ripple-effects": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/material-ripple-effects/-/material-ripple-effects-2.0.1.tgz",
+      "integrity": "sha512-hHlUkZAuXbP94lu02VgrPidbZ3hBtgXBtjlwR8APNqOIgDZMV8MCIcsclL8FmGJQHvnORyvoQgC965vPsiyXLQ=="
+    },
    "node_modules/media-typer": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -5312,6 +5557,17 @@
        "node": ">= 6"
      }
    },
+    "node_modules/popmotion": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz",
+      "integrity": "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==",
+      "dependencies": {
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
    "node_modules/postcss": {
      "version": "8.4.35",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
@@ -6014,6 +6270,11 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/server-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/server-only/-/server-only-0.0.1.tgz",
+      "integrity": "sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA=="
+    },
    "node_modules/set-function-length": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.1.tgz",
@@ -6310,6 +6571,15 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/style-value-types": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz",
+      "integrity": "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==",
+      "dependencies": {
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.1.0"
+      }
+    },
    "node_modules/styled-jsx": {
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
@@ -6353,6 +6623,17 @@
        "node": ">=16 || 14 >=14.17"
      }
    },
+    "node_modules/superjson": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.1.tgz",
+      "integrity": "sha512-8iGv75BYOa0xRJHK5vRLEjE2H/i4lulTjzpUXic3Eg8akftYjkmQDa8JARQ42rlczXyFR3IeRoeFCc7RxHsYZA==",
+      "dependencies": {
+        "copy-anything": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
    "node_modules/supports-color": {
      "version": "7.2.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -6384,6 +6665,16 @@
        "node": ">=0.10"
      }
    },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    },
+    "node_modules/tailwind-merge": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.8.1.tgz",
+      "integrity": "sha512-+fflfPxvHFr81hTJpQ3MIwtqgvefHZFUHFiIHpVIRXvG/nX9+gu2P7JNlFu2bfDMJ+uHhi/pUgzaYacMoXv+Ww=="
+    },
    "node_modules/tailwindcss": {
      "version": "3.4.1",
      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
--- a/package.json
+++ b/package.json
@@ -11,8 +11,10 @@
  },
  "dependencies": {
    "@apollo/client": "^3.9.5",
+    "@apollo/experimental-nextjs-app-support": "^0.8.0",
    "@apollo/server": "^4.10.0",
    "@as-integrations/next": "^3.0.0",
+    "@material-tailwind/react": "^2.1.9",
    "@prisma/client": "^5.9.1",
    "graphql": "^16.8.1",
    "next": "14.1.0",
--- a/src/app/agents/page.tsx
+++ b/src/app/agents/page.tsx
@@ -1,9 +1,11 @@
 "use client";

 import AgentModal from "@/components/modals/agent_modal";
-import { agents } from "@/data/data";
 import { Agent } from "@/types/agent";
+import { GET_AGENTS } from "@/utils/graphql_queries";
+import { useQuery } from "@apollo/client";
 import { Icon } from "@iconify/react";
+import { Button } from "@material-tailwind/react";
 import { useState } from "react";

 const AgentsPage = () => {
@@ -11,9 +13,26 @@ const AgentsPage = () => {

  const [selectedAgent, setSelectedAgent] = useState<Agent | null>(null);

+  const { loading, error, data } = useQuery(GET_AGENTS);
+
+  console.log({ loading, error, data });
+
+  if (loading) {
+    return (
+      <Button
+        variant="text"
+        loading={true}
+        placeholder={"Loading"}
+        className="text-white"
+      >
+        Loading
+      </Button>
+    );
+  }
+
  return (
    <div className="container m-auto flex flex-wrap flex-col md:flex-row items-center justify-start p-2">
-      {agents.map((agent, i) => (
+      {data.agents.map((agent: Agent, i: number) => (
        <div key={i} className="w-full lg:w-1/2 p-3 relative">
          <div
            className={`flex flex-col ${
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -7,6 +7,7 @@ import BottomNav from "@/components/bottom_nav";
 import MaxWidthWrapper from "@/components/max_width_wrapper";
 import SideNav from "@/components/side_nav";
 import TopNav from "@/components/top_nav";
+import { ApolloWrapper } from "@/utils/apollo_wrapper";

 const inter = Inter({ subsets: ["latin"] });

@@ -23,21 +24,23 @@ export default function RootLayout({
  return (
    <html lang="en">
      <body className={inter.className}>
-        <TopNav />
-        <MaxWidthWrapper>
-          <div className="flex">
-            <SideNav />
-            <main className="flex-1">
-              <div
-                style={{ marginTop: 35 }}
-                className="flex flex-col pt-4 sm:ml-[120px] md:ml-[250px] sm:border-r sm:border-zinc-700 pb-20 h-full"
-              >
-                {children}
-              </div>
-            </main>
-          </div>
-        </MaxWidthWrapper>
-        <BottomNav />
+        <ApolloWrapper>
+          <TopNav />
+          <MaxWidthWrapper>
+            <div className="flex">
+              <SideNav />
+              <main className="flex-1">
+                <div
+                  style={{ marginTop: 35 }}
+                  className="flex flex-col pt-4 sm:ml-[120px] md:ml-[250px] sm:border-r sm:border-zinc-700 pb-20 h-full"
+                >
+                  {children}
+                </div>
+              </main>
+            </div>
+          </MaxWidthWrapper>
+          <BottomNav />
+        </ApolloWrapper>
      </body>
    </html>
  );
--- a/src/components/modals/agent_modal.tsx
+++ b/src/components/modals/agent_modal.tsx
@@ -179,7 +179,7 @@ export default function AgentModal(props: {
                    <img
                      src={agent?.image ?? "/sailor.png"}
                      alt="Software Engineer"
-                      className="w-full rounded-lg"
+                      className="w-7/12 mx-auto rounded-lg"
                    />
                  )}
                </div>
--- a/src/utils/apollo_client.ts
+++ b/src/utils/apollo_client.ts
@@ -0,0 +1,35 @@
+import {
+  ApolloClient,
+  ApolloLink,
+  HttpLink,
+  InMemoryCache,
+} from "@apollo/client";
+import {
+  NextSSRApolloClient,
+  NextSSRInMemoryCache,
+  SSRMultipartLink,
+} from "@apollo/experimental-nextjs-app-support/ssr";
+
+export const apolloClient = new ApolloClient({
+  uri: "/api/graphql",
+  cache: new InMemoryCache(),
+});
+
+export function makeApolloClient() {
+  const httpLink = new HttpLink({
+    uri: "/api/graphql",
+  });
+
+  return new NextSSRApolloClient({
+    cache: new NextSSRInMemoryCache(),
+    link:
+      typeof window === "undefined"
+        ? ApolloLink.from([
+            new SSRMultipartLink({
+              stripDefer: true,
+            }),
+            httpLink,
+          ])
+        : httpLink,
+  });
+}
--- a/src/utils/apollo_wrapper.tsx
+++ b/src/utils/apollo_wrapper.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import { ApolloNextAppProvider } from "@apollo/experimental-nextjs-app-support/ssr";
+import { makeApolloClient } from "./apollo_client";
+
+export function ApolloWrapper({ children }: React.PropsWithChildren) {
+  return (
+    <ApolloNextAppProvider makeClient={makeApolloClient}>
+      {children}
+    </ApolloNextAppProvider>
+  );
+}
--- a/src/utils/graphql_queries.ts
+++ b/src/utils/graphql_queries.ts
@@ -0,0 +1,281 @@
+import { gql } from "@apollo/client";
+
+export const GET_AGENTS = gql`
+  query GetAgents {
+    agents {
+      id
+      role
+      goal
+      backstory
+      tools
+      allowDelegation
+      verbose
+      image
+    }
+  }
+`;
+
+export const GET_AGENT_BY_ID = gql`
+  query GetAgentById($id: Int!) {
+    agent(id: $id) {
+      id
+      role
+      goal
+      backstory
+      tools
+      allowDelegation
+      verbose
+      image
+      missions {
+        id
+        name
+      }
+    }
+  }
+`;
+
+export const CREATE_AGENT = gql`
+  mutation CreateAgent(
+    $role: String!
+    $goal: String!
+    $backstory: String
+    $tools: [AgentTool!]
+    $allowDelegation: Boolean!
+    $verbose: Boolean!
+  ) {
+    createAgent(
+      role: $role
+      goal: $goal
+      backstory: $backstory
+      tools: $tools
+      allowDelegation: $allowDelegation
+      verbose: $verbose
+    ) {
+      id
+      role
+      goal
+      backstory
+      tools
+      allowDelegation
+      verbose
+      image
+    }
+  }
+`;
+
+export const UPDATE_AGENT = gql`
+  mutation UpdateAgent(
+    $id: Int!
+    $role: String
+    $goal: String
+    $backstory: String
+    $tools: [AgentTool!]
+    $allowDelegation: Boolean
+    $verbose: Boolean
+  ) {
+    updateAgent(
+      id: $id
+      role: $role
+      goal: $goal
+      backstory: $backstory
+      tools: $tools
+      allowDelegation: $allowDelegation
+      verbose: $verbose
+    ) {
+      id
+      role
+      goal
+      backstory
+      tools
+      allowDelegation
+      verbose
+      image
+    }
+  }
+`;
+
+export const DELETE_AGENT = gql`
+  mutation DeleteAgent($id: Int!) {
+    deleteAgent(id: $id) {
+      deleted
+    }
+  }
+`;
+
+export const GET_MISSIONS = gql`
+  query GetMissions {
+    missions {
+      id
+      name
+      crew {
+        id
+        role
+        goal
+        backstory
+        tools
+        allowDelegation
+        verbose
+        image
+      }
+      tasks {
+        name
+        description
+        agent {
+          id
+          role
+        }
+      }
+      verbose
+      process
+      result
+    }
+  }
+`;
+
+export const GET_MISSION_BY_ID = gql`
+  query GetMissionById($id: Int!) {
+    mission(id: $id) {
+      id
+      name
+      crew {
+        id
+        role
+        goal
+        backstory
+        tools
+        allowDelegation
+        verbose
+        image
+      }
+      tasks {
+        name
+        description
+        agent {
+          id
+          role
+        }
+      }
+      verbose
+      process
+      result
+    }
+  }
+`;
+
+export const CREATE_MISSION = gql`
+  mutation CreateMission(
+    $name: String!
+    $crew: [Int!]
+    $tasks: [TaskInput!]
+    $verbose: Boolean
+    $process: MissionProcess
+  ) {
+    createMission(
+      name: $name
+      crew: $crew
+      tasks: $tasks
+      verbose: $verbose
+      process: $process
+    ) {
+      id
+      name
+      crew {
+        id
+        role
+        goal
+        backstory
+        tools
+        allowDelegation
+        verbose
+        image
+      }
+      tasks {
+        name
+        description
+        agent {
+          id
+          role
+        }
+      }
+      verbose
+      process
+      result
+    }
+  }
+`;
+
+export const UPDATE_MISSION = gql`
+  mutation UpdateMission(
+    $id: Int!
+    $name: String
+    $crew: [Int!]
+    $tasks: [TaskInput!]
+    $verbose: Boolean
+    $process: MissionProcess
+  ) {
+    updateMission(
+      id: $id
+      name: $name
+      crew: $crew
+      tasks: $tasks
+      verbose: $verbose
+      process: $process
+    ) {
+      id
+      name
+      crew {
+        id
+        role
+        goal
+        backstory
+        tools
+        allowDelegation
+        verbose
+        image
+      }
+      tasks {
+        name
+        description
+        agent {
+          id
+          role
+        }
+      }
+      verbose
+      process
+      result
+    }
+  }
+`;
+
+export const DELETE_MISSION = gql`
+  mutation DeleteMission($id: Int!) {
+    deleteMission(id: $id) {
+      deleted
+    }
+  }
+`;
+
+export const RUN_MISSION = gql`
+  mutation RunMission($id: Int!) {
+    runMission(id: $id) {
+      id
+      name
+      crew {
+        id
+        role
+      }
+      tasks {
+        name
+        description
+        agent {
+          id
+          role
+        }
+      }
+      verbose
+      process
+      result
+    }
+  }
+`;
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,6 +1,6 @@
-import type { Config } from "tailwindcss";
+import withMT from "@material-tailwind/react/utils/withMT";

-const config: Config = {
+const config = withMT({
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
@@ -17,5 +17,5 @@ const config: Config = {
    },
  },
  plugins: [require("tw-elements-react/dist/plugin.cjs")],
-};
+});
 export default config;