Merge branch 'develop' into implementing-authentication-in-graphql

Author: tusharmath

.github/workflows/ci.yml

@@ -10,6 +10,9 @@ on:
     branches: [develop]
     types: [opened, reopened, synchronize]
 
+permissions:
+  contents: write
+
 jobs:
   build-and-deploy:
     concurrency: ci-${{ github.ref }}
@@ -29,11 +32,7 @@ jobs:
       - name: Install and Build 🔧
         run: |
           npm install
-          npx prettier --check "**/*.{graphql,yml,json,md,sh,ts,tsx,js}"
-          cd ./publish-externals
-          npm run generate
-          cd ..
-          npm run typecheck
+          npx prettier --check "**/*.{graphql,yml,json,md,sh,ts,tsx,js,css}"
           npm run build
 
       - name: Deploy 🚀
@@ -42,23 +41,26 @@ jobs:
         with:
           folder: build
 
-      - name: Get changed markdown files
-        id: changed-markdown-files
-        uses: tj-actions/changed-files@v44
-        with:
-          files: |
-            blog/**/*.{md,mdx}
-
       - name: Publish to Hashnode and Dev.to 📝
-        if: github.ref == 'refs/heads/develop' && steps.changed-markdown-files.outputs.any_changed == 'true'
         env:
           HASHNODE_PAT: ${{ secrets.HASHNODE_PAT }}
           HASHNODE_PUBLICATION_ID: ${{ secrets.HASHNODE_PUBLICATION_ID }}
-          CHANGED_FILES: ${{ steps.changed-markdown-files.outputs.all_changed_files }}
           DEVTO_API_KEY: ${{ secrets.DEVTO_API_KEY}}
           DEVTO_ORG_ID: ${{secrets.DEVTO_ORG_ID}}
           DEVTO_ORG_NAME: ${{secrets.DEVTO_ORG_NAME}}
         run: |
           cd ./publish-externals
           npm run generate
-          npx --yes tsx ./src/index.ts "$CHANGED_FILES"
+          if [ "$GITHUB_REF" == "refs/heads/develop" ]; then
+            npx --yes tsx ./src/index.ts --publish
+          else
+            npx --yes tsx ./src/index.ts
+          fi
+
+      - name: Commit and push changes (on develop)
+        if: github.event_name == 'push' && github.ref == 'refs/heads/develop'
+        uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          branch: develop
+          commit_author: Author <[email protected]>
+          commit_message: "[ci skip] update snapshot"

.github/workflows/convention.yml

@@ -0,0 +1,30 @@
+name: PR Title Validation
+
+on:
+  # pull_request_target is ok until we do not checkout and build external code
+  # TODO: maybe it is not required after all https://github.com/amannn/action-semantic-pull-request/issues/219
+  pull_request_target:
+    types: [opened, reopened, synchronize, edited]
+
+permissions:
+  pull-requests: read
+
+jobs:
+  title-check:
+    name: Check PR Title
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: PR Title
+        uses: amannn/action-semantic-pull-request@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Bounty PR Title
+        if: contains(github.event.pull_request.labels.*.name, '🙋 Bounty claim')
+        uses: amannn/action-semantic-pull-request@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          requireScope: true
+          scopes: \d+

.gitignore

@@ -23,3 +23,4 @@ yarn-error.log*
 .idea/
 src/*/*.json
 .vscode/
+.gitpod.yml

blog/graphql-angular-clients-2024-07-20.md

@@ -950,25 +950,31 @@ We've put together a complete set of working examples for everything we've cover
 
 ## Detailed Comparison Table
 
-| Method          | Bundle Size (minified + gzip)\* | Learning Curve | Caching Capabilities                    | Community Support | Additional Features                        |
-| --------------- | ------------------------------- | -------------- | --------------------------------------- | ----------------- | ------------------------------------------ |
-| Apollo Angular  | ~2kB                            | Moderate       | Extensive (InMemoryCache, customizable) | High              | State management, optimistic UI updates    |
-| Urql            | ~10.2 KB                        | Low            | Moderate (Document caching)             | Moderate          | Extensible architecture, lightweight       |
-| GraphQL-Request | Unknown                         | Low            | None (Minimal client)                   | Moderate          | Simplicity, works in Node and browsers     |
-| Axios           | ~13.2 KB                        | Low            | None (HTTP client only)                 | High              | Familiar HTTP handling, interceptors       |
-| Fetch API       | 0 KB (Browser built-in)         | Low            | None (Native API)                       | High              | No additional dependency, widely supported |
-
-(\*) Bundle sizes are approximate and may vary based on version and configuration. Values are culled from bundlephobia.com where available.
-
-### Notes:
-
-- **Apollo Angular**: Offers the most comprehensive feature set but comes with a larger bundle size and steeper learning curve.
-- **Urql**: Provides a good balance between features and bundle size, with a focus on simplicity.
-- **GraphQL-Request**: Minimal client ideal for simple use cases where advanced features aren't needed.
-- **Axios**: Not a GraphQL-specific solution, but familiar to many developers and versatile for various HTTP requests.
-- **Fetch API**: Native browser API, no additional bundle size, but requires more manual work for GraphQL operations.
-
-This table should help developers choose the right method based on their specific project needs, considering factors like bundle size, learning curve, caching capabilities, community support, and additional features.
+| Method           | Bundle Size (minified + gzip)\* | Learning Curve | Caching Capabilities                       | Community Support | Additional Features                                 |
+| ---------------- | ------------------------------- | -------------- | ------------------------------------------ | ----------------- | --------------------------------------------------- |
+| Apollo Angular¹  | 258 KB                          | Moderate       | Extensive (InMemoryCache, customizable)    | High              | State management, optimistic UI updates             |
+| Urql²            | 17 KB                           | Low            | Moderate (Document and normalized caching) | Moderate          | Extensible architecture, lightweight, plugin system |
+| GraphQL-Request³ | 58.6 KB                         | Low            | None (Minimal client)                      | Moderate          | Simplicity, works in Node and browsers              |
+| Axios⁴           | 24 KB                           | Low            | None (HTTP client only)                    | High              | Familiar HTTP handling, interceptors                |
+| Fetch API        | 0 KB (Browser built-in)         | Low            | None (Native API)                          | High              | No additional dependency, widely supported          |
+
+(\*) Bundle sizes are based on bundlejs.com calculations using the provided export statements, with minification and gzip compression applied.
+
+**Notes:**
+
+1. Apollo Angular's bundle size (258 KB gzipped) is significantly larger than other options, which may impact initial load times for applications.
+2. Urql offers a much smaller bundle size (17 KB gzipped) while still providing both document caching and normalized caching through its plugin architecture.
+3. GraphQL-Request, despite being a minimal client, has a larger bundle size (58.6 KB gzipped) than expected, which might be due to including the full GraphQL parser.
+4. Axios, a general-purpose HTTP client, has a moderate bundle size (24 KB gzipped) considering its feature set.
+5. The Fetch API remains the lightest option as it's built into modern browsers, but it lacks some conveniences provided by other libraries.
+6. Bundle sizes for critical path libraries can significantly impact performance. Consider lazy-loading or code-splitting strategies when using larger libraries like Apollo Angular.
+
+**Bundle Size References:**
+
+1. Apollo Angular: [bundlejs.com link](https://bundlejs.com/?q=apollo-angular%2Capollo-angular%2Fhttp%2C%40apollo%2Fclient%2Fcore&treeshake=%5B%7B+APOLLO_OPTIONS%2CApolloModule+%7D%5D%2C%5B%7B+HttpLink+%7D%5D%2C%5B%7B+InMemoryCache+%7D%5D)
+2. Urql: [bundlejs.com link](https://bundlejs.com/?q=urql%2C%40urql%2Fcore&treeshake=%5B%7B+createClient%2CProvider%2CuseQuery%2CuseMutation+%7D%5D%2C%5B%7B+cacheExchange%2CfetchExchange+%7D%5D)
+3. GraphQL-Request: [bundlejs.com link](https://bundlejs.com/?q=graphql-request&treeshake=%5B%7B+GraphQLClient%2Cgql+%7D%5D)
+4. Axios: [bundlejs.com link](https://bundlejs.com/?q=axios&treeshake=%5B%7B+default+as+axios+%7D%5D)
 
 ### Caching Capabilities
 

blog/graphql-schema-2024-07-11.md

@@ -1,5 +1,5 @@
 ---
-title: Design a GraphQL Schema So Good, It'll Make REST APIs Cry
+title: Design a GraphQL Schema So Good, It'll Make REST APIs Cry - Part 1
 authors:
   - name: Amit Singh
     title: Head of Growth and Strategy @ Tailcall
@@ -16,8 +16,18 @@ slug: graphql-schema
 
 Designing a robust, scalable GraphQL schema is critical for building production-ready APIs that can evolve with your application's needs. In this comprehensive guide, we'll walk through the process of crafting a GraphQL schema for a real-world application, highlighting best practices and considerations along the way.
 
+If you are thinking how we could possibly cover all of the lovely intricacies associated with this topic in one go, you are right, we can't and so we are not! We have created an amazing series to take you through the nuances of working with GraphQL schemas.
+
+Let's break our job into puzzle pieces. Let's start by simply creating designing a brand new schema!
+
 <!-- truncate -->
 
+<div style={{textAlign: 'center', margin:'16px'}}>
+
+<img src="/images/blog/puzzle-graphql-schema-1.png" alt="puzzle piece to visualise the series" style={{maxWidth: '40%'}} />
+
+</div>
+
 If you're new to GraphQL Schema, check out our [GraphQL Schema Tutorial](https://tailcall.run/graphql/schemas-and-types/) to get up to speed with the basics.
 
 ## The Power of GraphQL Schemas
@@ -474,3 +484,9 @@ Remember, your schema is a living document. As your application evolves, so too
 The TechTalent example we've explored here demonstrates many real-world considerations, but every application will have its unique requirements. Always design with your specific use cases in mind, and don't be afraid to iterate as you learn more about how your API is used in practice.
 
 By investing time in thoughtful schema design upfront, you'll create a solid foundation for your GraphQL API, enabling efficient development and a great experience for your API consumers.
+
+Alright greatttt! You have successfully completed the first part of a very intricate series!! Pat yourslef and maybe high five your cat! Here are the links to the next blogs in the series that have already been published.
+
+![cat giving high five](../static/images/blog/cat-high-five-gif.webp)
+
+- [Next Part](/blog/graphql-schema-part-2-1)