✨ Built with ❤️ using Apollo Client, React & TypeScript

🗂️ 1. Project Structure:

📁 client/
└── 📁 querys/
└── 📁 crud/
└── apolloClient.ts

📁 components/
└── 📁 ui/ # Custom UI elements
└── Switch.tsx # Toggle component

📁 pages/
└── 📁 Crud/
├── Index.tsx # Table with actions
├── Form.tsx # Add/Edit form
├── View.tsx # View-only dialog
└── types.ts # TypeScript interfaces

⚙️ 2. Apollo Client Setup

📝 File: client/apolloClient.ts

import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client";
import { setContext } from "@apollo/client/link/context";

const httpLink = createHttpLink({ uri: "<http://192.168.2.15:8001/graphql>" });

export const setAuthToken = (token: string) =>
  localStorage.setItem("AUTH_KEY", token);

const authLink = setContext((_, { headers }) => {
  const token = localStorage.getItem("AUTH_KEY");
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    },
  };
});

export const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});

Highlights:

• ✅ HTTP + Auth link composition
• 🔒 Token in Bearer header
• 🧠 Caching via InMemoryCache

Add this at your app’s root:

<ApolloProvider client={client}>
  <App />
</ApolloProvider>

📡 3. GraphQL Queries & Mutations

File: client/querys/crud/Index.ts

export const FIND_RECORDS = gql`...`; // fetch list
export const GET_RECORDS  = gql`...`; // fetch single by ID
export const CREATE_RECORDS = gql`...`;
export const UPDATE_RECORDS = gql`...`;
export const DELETE_RECORDS = gql`...`;

✅ Use gql tagged template literal

💡 Group by CRUD functions for better organization