Refactor Server and Client Codebases for Better Scalability and Type Safety

[elijahondiek]

Backend Refactoring: Apollo Server Enhancements

• Modularization: Refactored the Apollo server setup by segregating DataSources, Resolvers, and Schema into their respective files. Previously, these were all housed within index.js, leading to clutter and maintainability challenges. This modular approach lays a solid foundation for future scaling, as it simplifies the introduction of new resolvers, data sources, and schema modifications without overcrowding the entry file.
• Scalability and Maintainability: This change significantly enhances the server-side architecture's scalability and maintainability. It makes the codebase more intuitive for new developers and streamlines updates and enhancements.

Frontend Enhancements: React Application Updates

• Type Safety: Advanced the type safety of the project by isolating TypeScript types into a dedicated file. This move eradicates the use of any type, enforcing strict type checks across the application. This improvement minimizes runtime errors and enhances developer productivity through clearer type definitions.

• Query Optimization: Transitioned from useQuery to useLazyQuery for GraphQL queries. This strategic shift prevents the automatic execution of queries on the component mount, allowing for more controlled query execution based on user interactions or specific conditions. This enhancement optimizes the application's performance and user experience.

• UI Improvements:

1. Implemented ellipsis for article titles exceeding the standard display length, ensuring a neat presentation of long titles without compromising readability.
2. Adjusted the layout to move the publication date to the bottom of article cards, aligning with design best practices for content hierarchy.
3. Standardized the size of article cards, creating a uniform and visually appealing grid layout for articles.

Impact

These changes collectively refine the codebase's structure, improve performance, and enhance the user interface, significantly contributing to the project's long-term success and scalability.

When using useQuery, double requests to the server are generated. Adding skip does not solve the issue.

First request to the server as the component mounts - no username.

Second request to the server.

After fix: By using useLazyQuery instead of useQuery.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
hashnode-api-blogs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 7, 2024 7:00pm