Hack with category query

no idea what I am doing :D

functions/graphql/resolvers.js

@@ -1,5 +1,8 @@
 module.exports = {
   Query: {
+    allCategories: async (_source, args, context) => {
+      return context.prisma.category.findMany();
+    },
     allProjects: async (_source, args, context) => {
       return context.prisma.project.findMany();
     },
@@ -11,7 +14,7 @@ module.exports = {
       });
     },
   },
-  Mutation: {
-    vote: async (_source, args, context) => {},
-  },
+  //Mutation: {
+  //  vote: async (_source, args, context) => {},
+  //},
 };

functions/graphql/typeDefs.js

@@ -17,7 +17,8 @@ module.exports = gql`
   }
 
   type Query {
-    allProjects: [Project!]!
+    allProjects: [Project]!
     getProject(id: Int!): Project
+    allCategories: [Category]!
   }
 `;

package.json

@@ -5,6 +5,7 @@
   "homepage": ".",
   "dependencies": {
     "@apollo/client": "^3.5.5",
+    "@prisma/client": "3.5.0",
     "@reduxjs/toolkit": "^1.6.2",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^11.2.7",
@@ -13,8 +14,12 @@
     "@types/node": "^12.20.36",
     "@types/react": "^17.0.33",
     "@types/react-dom": "^17.0.10",
+    "apollo-server": "^3.5.0",
+    "apollo-server-lambda": "^3.5.0",
     "framer-motion": "^5.3.0",
+    "graphql": "^16.0.1",
     "lodash.throttle": "^4.1.1",
+    "prisma": "3.5.0",
     "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.0.4",
     "react-dom": "^17.0.2",
@@ -27,11 +32,7 @@
     "react-router-dom": "^6.0.2",
     "react-scripts": "4.0.3",
     "typescript": "^4.4.4",
-    "web-vitals": "^1.1.2",
-    "@prisma/client": "3.5.0",
-    "apollo-server": "^3.5.0",
-    "graphql": "^16.0.1",
-    "prisma": "3.5.0"
+    "web-vitals": "^1.1.2"
   },
   "scripts": {
     "start": "craco start",
@@ -85,6 +86,7 @@
     "@types/react-copy-to-clipboard": "^5.0.2",
     "autoprefixer": "^9.8.8",
     "gh-pages": "^3.2.3",
+    "netlify-cli": "^8.0.3",
     "postcss": "^7.0.39",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
   }

src/Components/ExplorePage/partials/Categories.tsx

@@ -1,15 +1,23 @@
-import { getAllCategories } from "../../../api"
-import { useQuery } from 'react-query'
+import { useQuery, gql } from "@apollo/client";
+
+const ALL_CATEGORIES = gql`
+  query GetCategories {
+    allCategories() {
+      id
+      title
+    }
+  }
+`;
 
 export default function Categories() {
 
-    const { data, isLoading } = useQuery("categories", getAllCategories);
+    const { loading, error, data } = useQuery(ALL_CATEGORIES);
 
     const handleClick = (categoryId: string) => {
 
     }
 
-    if (isLoading)
+    if (loading)
         return null;
 
     return (

src/index.tsx

@@ -1,15 +1,29 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import {
+  ApolloClient,
+  InMemoryCache,
+  ApolloProvider,
+  useQuery,
+  gql
+} from "@apollo/client";
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import Wrapper from './utils/Wrapper';
 
+const client = new ApolloClient({
+  uri: '/.netlify/functions/graphql',
+  cache: new InMemoryCache()
+});
+
 ReactDOM.render(
   <React.StrictMode>
-    <Wrapper>
-      <App />
-    </Wrapper>
+    <ApolloProvider client={client}>
+      <Wrapper>
+        <App />
+      </Wrapper>
+    </ApolloProvider>
   </React.StrictMode>,
   document.getElementById('root')
 );