Suspense Query to Suspense Queries Example (#9)

* .

* .

* guide

* readme

* .

* done

* readme format

Author: vishalshenoy

useSuspenseQuery_to_useSuspenseQueries/README.md

@@ -0,0 +1,104 @@
+# Transform useSuspenseQuery to useSuspenseQueries
+
+This example demonstrates how to use Codegen to automatically convert multiple `useSuspenseQuery` calls to a single `useSuspenseQueries` call in React codebases. The migration script makes this process simple by handling all the tedious manual updates automatically.
+
+## How the Migration Script Works
+
+The script automates the entire migration process in a few key steps:
+
+1. **File Detection**
+   ```python
+   for file in codebase.files:
+       if "useSuspenseQuery" not in file.source:
+           continue
+   ```
+   - Automatically identifies files using `useSuspenseQuery`
+   - Skips irrelevant files to avoid unnecessary processing
+   - Uses Codegen's intelligent code analysis engine
+
+2. **Import Management**
+   ```python
+   import_str = "import { useQuery, useSuspenseQueries } from '@tanstack/react-query'"
+   file.add_import_from_import_string(import_str)
+   ```
+   - Uses Codegen's import analysis to add required imports
+   - Preserves existing import structure
+   - Handles import deduplication automatically
+
+3. **Query Transformation**
+   ```python
+   # Convert multiple queries to single useSuspenseQueries call
+   new_query = f"const [{', '.join(results)}] = useSuspenseQueries({{queries: [{', '.join(queries)}]}})"
+   ```
+   - Collects multiple `useSuspenseQuery` calls
+   - Combines them into a single `useSuspenseQueries` call
+   - Maintains variable naming and query configurations
+
+## Why This Makes Migration Easy
+
+1. **Zero Manual Updates**
+   - Codegen SDK handles all the file searching and updating
+   - No tedious copy-paste work
+
+2. **Consistent Changes**
+   - Ensures all transformations follow the same patterns
+   - Maintains code style consistency
+
+3. **Safe Transformations**
+   - Validates changes before applying them
+   - Easy to review and revert if needed
+
+## Common Migration Patterns
+
+### Multiple Query Calls
+```typescript
+// Before
+const result1 = useSuspenseQuery(queryConfig1)
+const result2 = useSuspenseQuery(queryConfig2)
+const result3 = useSuspenseQuery(queryConfig3)
+
+// Automatically converted to:
+const [result1, result2, result3] = useSuspenseQueries({
+  queries: [queryConfig1, queryConfig2, queryConfig3]
+})
+```
+
+## Key Benefits to Note
+
+1. **Reduced Re-renders**
+   - Single query call instead of multiple separate calls
+   - Better React performance
+
+2. **Improved Code Readability**
+   - Cleaner, more consolidated query logic
+   - Easier to maintain and understand
+
+3. **Network Optimization**
+   - Batched query requests
+   - Better resource utilization
+
+## Running the Migration
+
+```bash
+# Install Codegen
+pip install codegen
+
+# Run the migration
+python run.py
+```
+
+The script will:
+1. Initialize the codebase
+2. Find files containing `useSuspenseQuery`
+3. Apply the transformations
+4. Print detailed progress information
+
+## Learn More
+
+- [React Query Documentation](https://tanstack.com/query/latest)
+- [useSuspenseQueries API](https://tanstack.com/query/latest/docs/react/reference/useSuspenseQueries)
+- [Codegen Documentation](https://docs.codegen.com)
+
+## Contributing
+
+Feel free to submit issues and enhancement requests!

useSuspenseQuery_to_useSuspenseQueries/run.py

@@ -0,0 +1,88 @@
+import codegen
+from codegen import Codebase
+from codegen.sdk.core.detached_symbols.function_call import FunctionCall
+
+
+@codegen.function("useSuspenseQuery-to-useSuspenseQueries")
+def run(codebase: Codebase):
+    """Convert useSuspenseQuery calls to useSuspenseQueries in a React codebase.
+
+    This codemod:
+    1. Finds all files containing useSuspenseQuery
+    2. Adds the necessary import statement
+    3. Converts multiple useSuspenseQuery calls to a single useSuspenseQueries call
+    """
+    # Import statement for useSuspenseQueries
+    import_str = "import { useQuery, useSuspenseQueries } from '@tanstack/react-query'"
+
+    # Track statistics
+    files_modified = 0
+    functions_modified = 0
+
+    # Iterate through all files in the codebase
+    for file in codebase.files:
+        if "useSuspenseQuery" not in file.source:
+            continue
+
+        print(f"Processing {file.filepath}")
+        # Add the import statement
+        file.add_import_from_import_string(import_str)
+        file_modified = False
+
+        # Iterate through all functions in the file
+        for function in file.functions:
+            if "useSuspenseQuery" not in function.source:
+                continue
+
+            results = []  # Store left-hand side of assignments
+            queries = []  # Store query arguments
+            old_statements = []  # Track statements to replace
+
+            # Find useSuspenseQuery assignments
+            for stmt in function.code_block.assignment_statements:
+                if not isinstance(stmt.right, FunctionCall):
+                    continue
+
+                fcall = stmt.right
+                if fcall.name != "useSuspenseQuery":
+                    continue
+
+                old_statements.append(stmt)
+                results.append(stmt.left.source)
+                queries.append(fcall.args[0].value.source)
+
+            # Convert to useSuspenseQueries if needed
+            if old_statements:
+                new_query = f"const [{', '.join(results)}] = useSuspenseQueries({{queries: [{', '.join(queries)}]}})"
+                print(
+                    f"Converting useSuspenseQuery to useSuspenseQueries in {function.name}"
+                )
+
+                # Print the diff
+                print("\nOriginal code:")
+                print("\n".join(stmt.source for stmt in old_statements))
+                print("\nNew code:")
+                print(new_query)
+                print("-" * 50)
+
+                # Replace old statements with new query
+                for stmt in old_statements:
+                    stmt.edit(new_query)
+
+                functions_modified += 1
+                file_modified = True
+
+        if file_modified:
+            files_modified += 1
+
+    print("\nModification complete:")
+    print(f"Files modified: {files_modified}")
+    print(f"Functions modified: {functions_modified}")
+
+
+if __name__ == "__main__":
+    print("Initializing codebase...")
+    codebase = Codebase.from_repo("deepfence/ThreatMapper")
+
+    print("Running codemod...")
+    run(codebase)