refactor: migrate to graphql

client/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@apollo/client": "^3.11.8",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -12,6 +13,7 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
     "axios": "^1.7.7",
+    "graphql": "^16.9.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2",

client/src/apolloClient.ts

@@ -0,0 +1,8 @@
+import { ApolloClient, InMemoryCache } from "@apollo/client";
+
+const client = new ApolloClient({
+	uri: "http://localhost:3000/", // Your GraphQL server URL
+	cache: new InMemoryCache(),
+});
+
+export default client;

client/src/components/CreatePost.tsx

@@ -1,22 +1,25 @@
 import React, { useState } from 'react';
-import axios from 'axios';
+import { useMutation } from '@apollo/client';
+import { CREATE_POST } from '../graphql/mutations';
 import { useNavigate, Link } from 'react-router-dom';
 
 const CreatePost: React.FC = () => {
     const [title, setTitle] = useState('');
     const [content, setContent] = useState('');
     const navigate = useNavigate();
 
+    // Mutation to create a new post
+    const [createPost] = useMutation(CREATE_POST, {
+        onCompleted: () => {
+            // Redirect to the home page after creation
+            navigate('/');
+        },
+        refetchQueries: ['GetPosts'],
+    });
+
     const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
-
-        await axios.post('http://localhost:3000/posts', {
-            title,
-            content,
-        });
-
-        // Redirect to the home page after creation
-        navigate('/');
+        await createPost({ variables: { title, content } });
     };
 
     return (