This video covers the usage of GraphQL with Next.js and Node.js, focusing on creating efficient APIs. It explains the setup of Postgres and the use of TypeORM for database management. The speaker discusses the snake naming strategy for mapping TypeScript classes to Postgres tables and the importance of the EntityManager in TypeORM for handling transactions. The video also covers server-side rendering and static site rendering in Next.js, using the Apollo Client for accessing GraphQL APIs. Additionally, the video highlights the use of Apollo Client DevTools and Altair for debugging and writing queries. The speaker demonstrates creating a new entity called 'peer' in the GraphQL API, generating a complete CRUD resource for it, and updating the app module accordingly. The video also touches on the importance of using a transactional EntityManager for atomic operations and the benefits of TypeORM in NestJS applications.
From Author:
How to build a fullstack GraphQL application (Postgres + NestJs + React) in the shortest time possible.
All beginnings are hard. Even harder than choosing the technology is often developing a suitable architecture. Especially when it comes to GraphQL.
In this workshop, you will get a variety of best practices that you would normally have to work through over a number of projects - all in just three hours.
If you've always wanted to participate in a hackathon to get something up and running in the shortest amount of time - then take an active part in this workshop, and participate in the thought processes of the trainer.
This workshop has been presented at React Summit 2022, check out the latest edition of this React Conference.
FAQ
In a NestJS application, the resolver acts as the firewall, interfacing between the client and the server. It handles GraphQL queries and mutations, ensuring that operations like data fetching and updates are executed properly. The resolver is responsible for defining and managing GraphQL endpoints.
In NestJS, you can generate a CRUD resource using the Nest CLI command `nest g resource [name]`. This command sets up a new module with all necessary files and configurations for creating, reading, updating, and deleting resources. You can specify additional options such as `--no-rest` and `--graphql-code-first` to tailor the resource to your needs.
TypeORM integrates seamlessly with NestJS, providing features such as automatic table creation (entities), complex data handling, and transaction management. It supports active record and data mapper patterns, making it versatile for different development styles. TypeORM simplifies database interactions and ensures data integrity across transactions.
In GraphQL within a NestJS application, errors are handled through exceptions. When an error occurs, GraphQL returns an error response that includes messages detailing the issue. Developers can throw custom exceptions in their resolvers or services, which GraphQL will catch and format appropriately in the response.
The `EntityManager` in TypeORM is responsible for managing database operations involving entities. It handles the lifecycle of entities, from creation and updates to deletion, and provides methods for querying and interacting with the database. The EntityManager ensures that all operations are consistent and transaction-safe.
To enhance the performance of GraphQL queries in NestJS, use efficient resolvers, implement caching strategies, and optimize data fetching with techniques like batching and limiting fields returned in queries. Additionally, consider using DataLoader to batch and cache requests, reducing the number of database hits.
Next.js offers several rendering methods, including server-side rendering (SSR), static site generation (SSG), and client-side rendering. SSR dynamically generates HTML for each request, SSG pre-renders pages at build time, and client-side rendering fetches data and renders content in the browser, enhancing interactive experiences.
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.
The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.
React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.
Table of contents: - Kick-off and Svelte introduction - Initialise frontend project - Tour of the SvelteKit skeleton project - Configure backend project - Query Data with GraphQL - Fetching data to the frontend with GraphQL - Styling - Svelte directives - Routing in SvelteKit - Endpoints in SvelteKit - Deploying to Netlify - Navigation - Mutations in GraphCMS - Sending GraphQL Mutations via SvelteKit - Q&A
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™? Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster? At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.
Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.
Table of contents: - Introduction to Vue3 - Composition API - Core libraries - Vue3 ecosystem
Prerequisites: IDE of choice (Inellij or VSC) installed Nodejs + NPM
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
Featured WorkshopFree
2 authors
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.
This Talk explores React's internal jargon, specifically fiber, which is an internal unit of work for rendering and committing. Fibers facilitate efficient updates to elements and play a crucial role in the reconciliation process. The work loop, complete work, and commit phase are essential steps in the rendering process. Understanding React's internals can help with optimizing code and pull request reviews. React 18 introduces the work loop sync and async functions for concurrent features and prioritization. Fiber brings benefits like async rendering and the ability to discard work-in-progress trees, improving user experience.
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
React Advanced Conference 2021
Comments