@idealyst/cli 1.0.91 → 1.0.93

package/template/packages/shared/src/components/HelloWorld.tsx

@@ -1,48 +1,144 @@
 import { Button, Card, Input, Screen, Text, View } from "@idealyst/components";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
+import { getGraphQLClient, gql } from "../graphql/client";
 import { trpc } from "../trpc/client";
 
+// GraphQL queries and mutations
+const TESTS_QUERY = gql`
+  query GetTests($take: Int, $skip: Int) {
+    tests(take: $take, skip: $skip) {
+      id
+      name
+      message
+      status
+      createdAt
+    }
+  }
+`;
+
+const CREATE_TEST_MUTATION = gql`
+  mutation CreateTest($input: CreateTestInput!) {
+    createTest(input: $input) {
+      id
+      name
+      message
+      status
+      createdAt
+    }
+  }
+`;
+
+const DELETE_TEST_MUTATION = gql`
+  mutation DeleteTest($id: String!) {
+    deleteTest(id: $id) {
+      id
+    }
+  }
+`;
+
 interface HelloWorldProps {
   name?: string;
   platform?: "web" | "mobile";
   projectName?: string;
 }
 
+// Type for test records
+interface TestRecord {
+  id: string;
+  name: string;
+  message: string;
+  status: string;
+  createdAt: string;
+}
+
 export const HelloWorld = ({
   name = "World",
   platform = "web",
   projectName = "Your Project",
 }: HelloWorldProps) => {
-  const [newTestName, setNewTestName] = useState("");
-  const [newTestMessage, setNewTestMessage] = useState("");
+  const queryClient = useQueryClient();
+  const [activeTab, setActiveTab] = useState<"trpc" | "graphql">("trpc");
+
+  // tRPC state
+  const [trpcTestName, setTrpcTestName] = useState("");
+  const [trpcTestMessage, setTrpcTestMessage] = useState("");
+
+  // GraphQL state
+  const [gqlTestName, setGqlTestName] = useState("");
+  const [gqlTestMessage, setGqlTestMessage] = useState("");
 
-  // Use tRPC hooks directly
-  const tests = trpc.test.getAll.useQuery({});
-  const createTestMutation = trpc.test.create.useMutation({
+  // ========== tRPC Hooks ==========
+  const trpcTests = trpc.test.getAll.useQuery({});
+  const trpcCreateMutation = trpc.test.create.useMutation({
     onSuccess: () => {
-      tests.refetch();
-      setNewTestName("");
-      setNewTestMessage("");
+      trpcTests.refetch();
+      setTrpcTestName("");
+      setTrpcTestMessage("");
     },
   });
-  const deleteTestMutation = trpc.test.delete.useMutation({
+  const trpcDeleteMutation = trpc.test.delete.useMutation({
     onSuccess: () => {
-      tests.refetch();
+      trpcTests.refetch();
     },
   });
 
-  const handleCreateTest = async () => {
-    if (!newTestName || !newTestMessage) return;
+  // ========== GraphQL Hooks (with React Query) ==========
+  const gqlTests = useQuery<{ tests: TestRecord[] }>({
+    queryKey: ["graphql", "tests"],
+    queryFn: async () => {
+      const client = getGraphQLClient();
+      return client.request(TESTS_QUERY, { take: 10 });
+    },
+  });
+
+  const gqlCreateMutation = useMutation({
+    mutationFn: async (data: { name: string; message: string; status: string }) => {
+      const client = getGraphQLClient();
+      return client.request(CREATE_TEST_MUTATION, { input: data });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["graphql", "tests"] });
+      setGqlTestName("");
+      setGqlTestMessage("");
+    },
+  });
 
-    await createTestMutation.mutateAsync({
-      name: newTestName,
-      message: newTestMessage,
+  const gqlDeleteMutation = useMutation({
+    mutationFn: async (id: string) => {
+      const client = getGraphQLClient();
+      return client.request(DELETE_TEST_MUTATION, { id });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["graphql", "tests"] });
+    },
+  });
+
+  // ========== Handlers ==========
+  const handleTrpcCreate = async () => {
+    if (!trpcTestName || !trpcTestMessage) return;
+    await trpcCreateMutation.mutateAsync({
+      name: trpcTestName,
+      message: trpcTestMessage,
       status: "active",
     });
   };
 
-  const handleDeleteTest = async (id: string) => {
-    await deleteTestMutation.mutateAsync({ id });
+  const handleTrpcDelete = async (id: string) => {
+    await trpcDeleteMutation.mutateAsync({ id });
+  };
+
+  const handleGqlCreate = async () => {
+    if (!gqlTestName || !gqlTestMessage) return;
+    await gqlCreateMutation.mutateAsync({
+      name: gqlTestName,
+      message: gqlTestMessage,
+      status: "active",
+    });
+  };
+
+  const handleGqlDelete = async (id: string) => {
+    await gqlDeleteMutation.mutateAsync(id);
   };
 
   const platformEmoji = platform === "mobile" ? "📱" : "🌐";
@@ -196,107 +292,238 @@ export const HelloWorld = ({
             🚀 API Demo - Database Integration
           </Text>
           <Text size="md" style={{ marginBottom: 16, color: "#64748b" }}>
-            Test your full-stack integration! This section demonstrates
-            real-time database operations.
+            Test your full-stack integration! Toggle between tRPC and GraphQL to
+            see both APIs in action.
           </Text>
 
-          {/* Create New Test Form */}
-          <Card
-            type="filled"
-            padding="md"
-            style={{ marginBottom: 16, backgroundColor: "#f8fafc" }}
+          {/* API Toggle */}
+          <View
+            style={{
+              flexDirection: "row",
+              gap: 8,
+              marginBottom: 16,
+            }}
           >
-            <Text size="md" weight="semibold" style={{ marginBottom: 12 }}>
-              Create New Test Entry
-            </Text>
+            <Button
+              type={activeTab === "trpc" ? "contained" : "outlined"}
+              intent={activeTab === "trpc" ? "primary" : "neutral"}
+              onPress={() => setActiveTab("trpc")}
+              size="sm"
+            >
+              tRPC
+            </Button>
+            <Button
+              type={activeTab === "graphql" ? "contained" : "outlined"}
+              intent={activeTab === "graphql" ? "primary" : "neutral"}
+              onPress={() => setActiveTab("graphql")}
+              size="sm"
+            >
+              GraphQL
+            </Button>
+          </View>
 
-            <View style={{ gap: 12 }}>
-              <Input
-                placeholder="Test name"
-                value={newTestName}
-                onChangeText={setNewTestName}
-              />
-              <Input
-                placeholder="Test message"
-                value={newTestMessage}
-                onChangeText={setNewTestMessage}
-              />
-              <Button
-                onPress={handleCreateTest}
-                disabled={
-                  !newTestName ||
-                  !newTestMessage ||
-                  createTestMutation.isPending
-                }
-                style={{ alignSelf: "flex-start" }}
+          {/* tRPC Tab */}
+          {activeTab === "trpc" && (
+            <>
+              <Card
+                type="filled"
+                padding="md"
+                style={{ marginBottom: 16, backgroundColor: "#f0f9ff" }}
               >
-                {createTestMutation.isPending ? "Creating..." : "Create Test"}
-              </Button>
-            </View>
-          </Card>
+                <Text size="md" weight="semibold" style={{ marginBottom: 12 }}>
+                  Create via tRPC
+                </Text>
+                <View style={{ gap: 12 }}>
+                  <Input
+                    placeholder="Test name"
+                    value={trpcTestName}
+                    onChangeText={setTrpcTestName}
+                  />
+                  <Input
+                    placeholder="Test message"
+                    value={trpcTestMessage}
+                    onChangeText={setTrpcTestMessage}
+                  />
+                  <Button
+                    onPress={handleTrpcCreate}
+                    disabled={
+                      !trpcTestName ||
+                      !trpcTestMessage ||
+                      trpcCreateMutation.isPending
+                    }
+                    style={{ alignSelf: "flex-start" }}
+                  >
+                    {trpcCreateMutation.isPending ? "Creating..." : "Create (tRPC)"}
+                  </Button>
+                </View>
+              </Card>
 
-          {/* Tests List */}
-          <View>
-            <Text size="md" weight="semibold" style={{ marginBottom: 12 }}>
-              Database Records ({tests.data?.length || 0})
-            </Text>
+              <View>
+                <Text size="md" weight="semibold" style={{ marginBottom: 12 }}>
+                  Records via tRPC ({trpcTests.data?.length || 0})
+                </Text>
+
+                {trpcTests.isPending ? (
+                  <Card type="outlined" padding="md">
+                    <Text size="sm" style={{ color: "#64748b" }}>
+                      Loading via tRPC...
+                    </Text>
+                  </Card>
+                ) : trpcTests.data?.length === 0 ? (
+                  <Card type="outlined" padding="md">
+                    <Text size="sm" style={{ color: "#64748b" }}>
+                      No tests found. Create one above!
+                    </Text>
+                  </Card>
+                ) : (
+                  <View style={{ gap: 8 }}>
+                    {trpcTests.data?.map((test: TestRecord) => (
+                      <Card key={test.id} type="outlined" padding="md">
+                        <View
+                          style={{
+                            flexDirection: "row",
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                          }}
+                        >
+                          <View style={{ flex: 1 }}>
+                            <Text
+                              size="sm"
+                              weight="semibold"
+                              style={{ marginBottom: 4 }}
+                            >
+                              {test.name}
+                            </Text>
+                            <Text
+                              size="sm"
+                              style={{ color: "#64748b", marginBottom: 4 }}
+                            >
+                              {test.message}
+                            </Text>
+                            <Text size="sm" style={{ color: "#0ea5e9" }}>
+                              tRPC • {test.status} •{" "}
+                              {new Date(test.createdAt).toLocaleDateString()}
+                            </Text>
+                          </View>
+                          <Button
+                            intent="error"
+                            size="sm"
+                            onPress={() => handleTrpcDelete(test.id)}
+                            disabled={trpcDeleteMutation.isPending}
+                          >
+                            Delete
+                          </Button>
+                        </View>
+                      </Card>
+                    ))}
+                  </View>
+                )}
+              </View>
+            </>
+          )}
 
-            {tests.isPending ? (
-              <Card type="outlined" padding="md">
-                <Text size="sm" style={{ color: "#64748b" }}>
-                  Loading tests...
+          {/* GraphQL Tab */}
+          {activeTab === "graphql" && (
+            <>
+              <Card
+                type="filled"
+                padding="md"
+                style={{ marginBottom: 16, backgroundColor: "#fdf4ff" }}
+              >
+                <Text size="md" weight="semibold" style={{ marginBottom: 12 }}>
+                  Create via GraphQL
                 </Text>
+                <View style={{ gap: 12 }}>
+                  <Input
+                    placeholder="Test name"
+                    value={gqlTestName}
+                    onChangeText={setGqlTestName}
+                  />
+                  <Input
+                    placeholder="Test message"
+                    value={gqlTestMessage}
+                    onChangeText={setGqlTestMessage}
+                  />
+                  <Button
+                    intent="primary"
+                    onPress={handleGqlCreate}
+                    disabled={
+                      !gqlTestName ||
+                      !gqlTestMessage ||
+                      gqlCreateMutation.isPending
+                    }
+                    style={{ alignSelf: "flex-start" }}
+                  >
+                    {gqlCreateMutation.isPending
+                      ? "Creating..."
+                      : "Create (GraphQL)"}
+                  </Button>
+                </View>
               </Card>
-            ) : tests.data?.length === 0 ? (
-              <Card type="outlined" padding="md">
-                <Text size="sm" style={{ color: "#64748b" }}>
-                  No tests found. Create one above!
+
+              <View>
+                <Text size="md" weight="semibold" style={{ marginBottom: 12 }}>
+                  Records via GraphQL ({gqlTests.data?.tests?.length || 0})
                 </Text>
-              </Card>
-            ) : (
-              <View style={{ gap: 8 }}>
-                {tests.data?.map((test: any) => (
-                  <Card key={test.id} type="outlined" padding="md">
-                    <View
-                      style={{
-                        flexDirection: "row",
-                        justifyContent: "space-between",
-                        alignItems: "center",
-                      }}
-                    >
-                      <View style={{ flex: 1 }}>
-                        <Text
-                          size="sm"
-                          weight="semibold"
-                          style={{ marginBottom: 4 }}
-                        >
-                          {test.name}
-                        </Text>
-                        <Text
-                          size="sm"
-                          style={{ color: "#64748b", marginBottom: 4 }}
-                        >
-                          {test.message}
-                        </Text>
-                        <Text size="sm" style={{ color: "#10b981" }}>
-                          Status: {test.status} •{" "}
-                          {new Date(test.createdAt).toLocaleDateString()}
-                        </Text>
-                      </View>
-                      <Button
-                        intent="error"
-                        size="sm"
-                        onPress={() => handleDeleteTest(test.id)}
-                        disabled={deleteTestMutation.isPending}
-                      >
-                        Delete
-                      </Button>
-                    </View>
+
+                {gqlTests.isPending ? (
+                  <Card type="outlined" padding="md">
+                    <Text size="sm" style={{ color: "#64748b" }}>
+                      Loading via GraphQL...
+                    </Text>
                   </Card>
-                ))}
+                ) : gqlTests.data?.tests?.length === 0 ? (
+                  <Card type="outlined" padding="md">
+                    <Text size="sm" style={{ color: "#64748b" }}>
+                      No tests found. Create one above!
+                    </Text>
+                  </Card>
+                ) : (
+                  <View style={{ gap: 8 }}>
+                    {gqlTests.data?.tests?.map((test: TestRecord) => (
+                      <Card key={test.id} type="outlined" padding="md">
+                        <View
+                          style={{
+                            flexDirection: "row",
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                          }}
+                        >
+                          <View style={{ flex: 1 }}>
+                            <Text
+                              size="sm"
+                              weight="semibold"
+                              style={{ marginBottom: 4 }}
+                            >
+                              {test.name}
+                            </Text>
+                            <Text
+                              size="sm"
+                              style={{ color: "#64748b", marginBottom: 4 }}
+                            >
+                              {test.message}
+                            </Text>
+                            <Text size="sm" style={{ color: "#d946ef" }}>
+                              GraphQL • {test.status} •{" "}
+                              {new Date(test.createdAt).toLocaleDateString()}
+                            </Text>
+                          </View>
+                          <Button
+                            intent="error"
+                            size="sm"
+                            onPress={() => handleGqlDelete(test.id)}
+                            disabled={gqlDeleteMutation.isPending}
+                          >
+                            Delete
+                          </Button>
+                        </View>
+                      </Card>
+                    ))}
+                  </View>
+                )}
               </View>
-            )}
-          </View>
+            </>
+          )}
         </Card>
       </View>
     </Screen>

package/template/packages/shared/src/graphql/client.ts

@@ -0,0 +1,34 @@
+import { GraphQLClient } from "graphql-request";
+
+// Configuration for GraphQL client
+export interface GraphQLClientConfig {
+  apiUrl: string;
+  headers?: () => Record<string, string>;
+}
+
+// Singleton instance for the GraphQL client
+let graphqlClient: GraphQLClient | null = null;
+
+// Create GraphQL client factory
+export function createGraphQLClient(config: GraphQLClientConfig): GraphQLClient {
+  graphqlClient = new GraphQLClient(config.apiUrl, {
+    headers: config.headers?.() ?? {},
+  });
+  return graphqlClient;
+}
+
+// Get the current GraphQL client instance
+export function getGraphQLClient(): GraphQLClient {
+  if (!graphqlClient) {
+    throw new Error(
+      "GraphQL client not initialized. Call createGraphQLClient first."
+    );
+  }
+  return graphqlClient;
+}
+
+// Re-export gql for convenience
+export { gql } from "graphql-request";
+
+// Re-export GraphQLClient type
+export type { GraphQLClient };

package/template/packages/shared/src/index.ts

@@ -8,6 +8,14 @@ export { default as AppRouter } from './navigation/AppRouter';
 export { trpc, createTRPCClient, createVanillaTRPCClient } from './trpc/client';
 export type { TRPCClientConfig, AppRouter } from './trpc/client';
 
+// Export GraphQL client utilities
+export {
+  createGraphQLClient,
+  getGraphQLClient,
+  gql,
+} from './graphql/client';
+export type { GraphQLClientConfig, GraphQLClient } from './graphql/client';
+
 // Simple type for the HelloWorld component props
 export interface HelloWorldProps {
   name?: string;

package/template/packages/web/vite.config.ts

@@ -48,7 +48,7 @@ export default defineConfig({
       "react-native": path.resolve(__dirname, "node_modules/react-native-web"),
       "@react-native/normalize-colors": path.resolve(
         __dirname,
-        "../../node_modules/@react-native/normalize-colors"
+        "node_modules/@react-native/normalize-colors"
       ),
     },
     // Platform-specific file resolution
@@ -87,7 +87,7 @@ export default defineConfig({
       },
       alias: {
         "react-native": path.resolve(__dirname, "node_modules/react-native-web"),
-        "@react-native/normalize-colors": path.resolve(__dirname, "../../node_modules/@react-native/normalize-colors"),
+        "@react-native/normalize-colors": path.resolve(__dirname, "node_modules/@react-native/normalize-colors"),
       },
     },
   },