Building Real-time Serverless GraphQL APIs on AWS with TypeScript and CDK

Rate this content

CDK (Cloud development kit) enables developers to build cloud infrastructure using popular programming languages like Python, Typescript, or JavaScript. CDK is a next-level abstraction in infrastructure as code, allowing developers who were traditionally unfamiliar with cloud computing to build scalable APIs and web services using their existing skillset, and do so in only a few lines of code.

In this talk, you’ll learn how to use the TypeScript flavor of CDK to build a hyper-scalable real-time API with GraphQL, Lambda, DynamoDB, and AWS AppSync . At the end of the talk, I’ll live code an API from scratch in just a couple of minutes and then test out queries, mutations, and subscriptions.

By the end of the talk, you should have a good understanding of GraphQL, AppSync, and CDK and be ready to build an API in your next project using TypeScript and CDK.

25 min
17 Jun, 2021

AI Generated Video Summary

This Talk provides an introduction to JavaScript and React, as well as insights into building real-time serverless GraphQL APIs with TypeScript, AppSync, and CDK. It covers the concepts of GraphQL schema, data sources, and resolvers, as well as the use of GraphQL subscriptions for real-time communication. The Talk also highlights the features of AppSync and CDK for building APIs and infrastructure. It concludes with a demonstration of creating an API with CDK and AppSync, including the creation of Lambda functions and DynamoDB tables.

1. Introduction to JavaScript and React

Short description:

We've created a new website for you to explore the world of JavaScript. We're bringing free articles, videos, courses, and tutorials to help you learn all about React.

We've created a new website for you to explore the world of JavaScript. We're bringing free articles, videos, courses, and tutorials to help you learn all about React. Click the link in the description to learn about all the new 하고 and react.js courses. We've also created a new playlist for you to check out. We've added many new courses, and we're also bringing free articles to the web and mobile in the future. Check out the link in the description to learn more about all the other courses we've created. Click the link in the description to learn more about all the other courses we've created.

2. Building Real-Time Serverless GraphQL APIs

Short description:

I'm going to be talking about building real-time serverless GraphQL APIs with TypeScript, AppSync, and CDK. We'll start with an introduction to GraphQL, then discuss AWS AppSync and Manage GraphQL Service, followed by a brief intro to CDK. I'll also do a live coding demo to demonstrate how all these components work together. GraphQL allows you to define a schema that represents your data types and operations. It offers more control over API latency and data transfer, returning responses in JSON. A GraphQL API consists of three main parts, starting with the schema.

Okay, hello everyone and thank you so much for attending my talk today. I'm really excited to be talking about this subject because it's something that I've been really using a lot lately and it's really powerful. So, I'm going to be talking about building real-time serverless GraphQL APIs with TypeScript, AppSync, and CDK. My name is Nader Dabit, I'm a Senior Developer Advocate and I'm by trade a front-end and mobile developer. And I've just now been working with AWS and back-end services for the last couple of years. And lately, I've really been focusing on building full-stack cloud and full-stack serverless apps. So, let's go ahead and jump right in because we have a lot to cover.

I'm going to be talking about a couple of things and they all kind of fit together. So, we're going to first start off with an introduction to GraphQL. We're going to then talk about AWS AppSync and Manage GraphQL Service. We're going to then do a brief intro to CDK. And then, we're going to kind of talk about how all of this stuff fits together, AppSync, CDK, and GraphQL. And then, I'm going to do a live coding demo. And I think the live coding demo kind of will show you how all this stuff works together better than any presentation will. But hopefully, putting all this together will be really helpful for you and you'll learn something.

So, let's talk about GraphQL for a bit. GraphQL, if you look it up on the internet and you find the definition, you might see something like this. A query language for your API. This doesn't say a whole lot. Let's dive a little bit deeper. With GraphQL, you have your, almost like a menu of your data, which is your GraphQL schema. The schema has all of the different data types, which are basically types, and all of the operations against those types. So, you have maybe a to-do app. You might think of something like a to-do type. And then, you might have operations for creating, reading, updating, and deleting your to-dos. All that is defined in your schema. And, once you've deployed your API, and we're going to talk about that a little bit more in just a moment, you can then just ask for the data that you want. And this is kind of the thing you've probably heard about before, if you've ever looked into GraphQL, is, one of the really powerful things about it is, you have the ability to build much lower latency and more, I guess, controlled APIs than when you're working with REST endpoints because you have a lot more control about the data that is getting sent back and forth across the wire, and then you get your response data returned to you in JSON.

So a GraphQL API is made up of three main parts. You have your schema, which we talk about in just a second there.

3. Understanding GraphQL Schema and Operations

Short description:

We'll dive into a little bit more in just a second. You have your resolvers, and then you have your data sources. So, the schema is where all of your data declarations live. So, again, for a to-do app, you might have a to-do type, and then to operate against that to-do type, you might need to define some operations.

We'll dive into a little bit more in just a second. You have your resolvers, and then you have your data sources. So, the schema is where all of your data declarations live. So, again, for a to-do app, you might have a to-do type, and then to operate against that to-do type, you might need to define some operations. So here, you might have a way to get a single to-do by ID. You might have a way to create a new to-do using a create to-do operation. And these are defined in queries, mutations, and then we also have a new type that is kind of unique to GraphQL called a subscription, and we'll talk about all three of those in just a second.

4. Understanding GraphQL Data Sources and Resolvers

Short description:

Once you've defined your schema, you have your data sources. The data sources are where the data is coming from for these operations, and you'll get the data returned to you in one of the types defined in your schema. Operations are handled in a resolver, which maps the GraphQL operation to a data source. This is an implementation detail for you as a developer, and frameworks or services like AppSync may have their own opinions.

So, once you've defined your schema, you then have your data sources. And the data sources are where the data is coming from for these operations, and then you're going to get the data returned to you in one of the types that you've defined in your schema. And the way that those operations are handled are done usually in a resolver. And the resolver are really essentially just a function or some type of code that maps the GraphQL operation to a data source. And this is an implementation detail for you as a developer if you're building out your own API, this is going to be kind of up to you how you write this. A lot of the frameworks have a little bit more opinionated ways about doing this. And if you're working with a GraphQL as a service, something like AppSync, those are also opinionated as well.

5. Data Sources and GraphQL Subscriptions

Short description:

So, a data source can be a database, a function outside the main service, or an HTTP endpoint for microservice architecture. GraphQL queries, mutations, and subscriptions map to HTTP verbs. You can request specific fields in a query and have more control over data access with GraphQL as a data source. GraphQL subscriptions enable real-time communication between a client and an API. Subscriptions are event-based and typically have names like onCreate, onUpdate, or onDelete. Implementing GraphQL subscriptions can be done using services like Hasura or AppSync, or by making decisions between servers and events or websockets.

So, a data source can be either a database, a function that is kind of outside of the main service itself, or an HTTP endpoint for bringing in a microservice architecture into a GraphQL API.

So, let's talk about the data fetching piece of GraphQL, which is really interesting. With GraphQL, you might be coming at this from Rust, so I think it's really convenient and really interesting to kind of compare the two, GraphQL versus Rust. With GraphQL, you have this idea of queries, mutations and subscriptions, and these map really well to things that we've done in the Rust world, kind of mapping to things like the HTTP verbs that we work with. So, when you need to read some data like getting or listing a list of items, you're going to be using a GraphQL query. If you're going to be updating, creating or deleting anything, you're going to be typically using a mutation, and then if you need some type of Realtime aspect to your API, you're going to be using subscriptions.

So, let's take a look at a table of GraphQL versus Rust verbs. So, again, mapping a Get request might make a lot of sense to a GraphQL query. So, getting an item by ID or getting a list of items will be typically a GraphQL query. And then post, put, delete or patch operations will be GraphQL mutations. So, that being said, let's take a look at kind of the way that GraphQL just brings back the data that you've asked for, kind of like we mentioned just a moment ago. So, in a query, you might be able to say, OK, we have this GraphQL type of to-do, and this to-do has four fields. It has an ID, a name and a createdAtValue or fields. And this request, we want to get all four of those fields, so that's fine. But you can also say, I only want to get a subset or a smaller selection set of these fields. And this is going to continue to work. You don't have to kind of make any updates to your back end. The way that GraphQL is built, the way that these queries are created, you only get the data that you've asked for. So again, if you've ever worked with building out different types of client applications for a single back end in the modern world, you might have a web, a mobile, a desktop app that also maybe has an Apple Watch app or even a car app in the future, you never know. Having GraphQL as a data source allows you to kind of have a lot more control over your data access without having to change a lot of code on your back end, once the implementation is complete.

So next, let's talk about the GraphQL subscriptions, which are the real-time aspect of GraphQL. GraphQL subscriptions enable real-time communication between a client and an API. Subscriptions are event-based. So when you create, update, or delete an item, you might be able to subscribe to that event. So typically, a subscription might have a name like onCreate, onUpdate, or onDelete. So for a to-do app, you might have onCreate to do, onUpdate to do, etc. Subscriptions are typically a two-way connection. So you have to have a way to send the update and then have a way to receive the update back on the client. So a lot of times you are then asked about, okay, with this being said, how do you actually implement GraphQL subscriptions? So if you're using a service like Hasura or AppSync or any of these GraphQL services, this is going to be kind of taken care of for you. But if you're building your own API, you're typically going to be making the decision between something like servers and events or websockets.

6. GraphQL Subscriptions Overview

Short description:

GraphQL APIs can be built using websockets. You can subscribe to subsets of data and receive only the fields you're interested in. For example, if you're interested in the ID, name, and completed value of a to-do, you can create a subscription to receive only that data.

I think a lot of the time you're seeing that GraphQL APIs are built using websockets. So, again, very similar to like a GraphQL query where you're asking for the data that you'd like and you only get that data, you can also subscribe to only subsets of data. So even though our to-do type has four different fields, we can make subscriptions and only return back like a subset of those fields. So let's say we only are interested in the ID, the name and the completed value, we'll create a subscription, we'll then only receive that data that we're subscribed to. So that's kind of a brief overview of GraphQL.

7. AppSync, CDK, and Infrastructure

Short description:

AppSync is a managed GraphQL service that provides a consistent API layer for any AWS service or data source. It offers enterprise security features, including single or multi-authorization types. Adding GraphQL subscriptions is easy with AppSync. You can use AWS SDKs for AppSync or other libraries like Urql or Apollo. CDK is a new way to write infrastructure as code and is gaining popularity among Amplify users. It supports multiple cloud providers and can be used in combination with Amplify for building infrastructure.

Let's now talk about AppSync, and then we're going to talk about CDK and then we're going to do a live demo. So AppSync is a managed GraphQL service, and it's built using a lot of really scalable infrastructure on AWS. So AppSync provides a consistent API layer for any AWS service or any data source, and these data sources don't have to live on AWS, they can pretty much live anywhere as long as they have some type of HTTP access or some type of access to your data center, which is kind of also available as well.

We have enterprise security features built in. So if you need to have a single or multi-authorization types for a public and private access or a combination of the two, we have that built in. So IAM, we have OIDC for bringing your own authentication provider. So if you're using something like Auth0 or Octa, you use OIDC. We have Cognito for a managed authentication service, and then we have API keys for public access. And one of the really interesting things about AppSync is how easy it is to add a GraphQL subscription. And we're going to be walking through that in code in just a moment. But for any mutation, subscriptions are already built into the service. All you need to do is add one additional line of code, and you can subscribe to any type, but also any subset of that type. So for instance, you might think of a chat app where you have messages. You can also pass in arguments, up to five different arguments, to subscribe to only updates for something like a chat room, using the chat room ID.

And then we also build and maintain our own SDKs for all these AWS services, including AppSync. So you can use something like Urql or Apollo. But we have our own SDKs that manage a lot of things, like authorization headers. And we have SDKs and libraries for web, iOS, Android, React Native and Flutter.

And so let's talk about CDK for a moment. CDK is short for Cloud Development Kit. And CDK is basically a new way to write infrastructure as code. And when I say new, it's kind of like a little over two years. So it's not that new, but it's still fairly new. And you can do this. It's a lot different than any of the infrastructure as code that we've seen in the past, because instead of using some type of configuration file like JSON or YAML, you're actually using TypeScript, JavaScript, Python, whatever your favorite programming language is. CDK first only supported AWS, but now it supports other cloud providers, including Azure. And it's really, really gaining a lot of popularity. And a lot of Amplify users that kind of build out their infrastructure use CDK as a CloudFormation provider, or they might use a combination of Amplify and CDK. And then they use the Amplify client libraries to connect. So initializing a new CDK project looks something like this.

8. Building an API with CDK and AppSync

Short description:

To get started with CDK, install the CDK CLI and initialize a new project. Add additional features from the provided boilerplate. Create a new CDK project and install any necessary packages. Configure the API and code, including the GraphQL schema and base authorization. Add data sources and resolvers, mapping them to the schema. Define everything in code. In the live demo, we'll start from scratch in an empty CDK app, importing CDK, AppSync, DynamoDB, and Lambda.

You just have you install the CDK CLI, and then you initialize a new project and you're ready to go. And then you can start adding additional features from the boilerplate that's provided there. And we're going to kind of be starting off from a base project, and we're going to be looking at how that works.

So AppSync with CDK. What you'll typically do is you'll go ahead and create your new CDK project, just like we showed you just a moment ago, CDK Init. You'll install any NPM packages that you'll need, any CDK packages using NPM. So for instance, for AppSync, you're going to need to install the AppSync CDK package. And then you'll also maybe need to install other data sources like Lambda, DynamoDB for whatever databases you're interacting with from CDK. You'll then create and configure the API and code. So you'll give the API a name. You'll set your GraphQL schema, and then you'll set some base authorization configuration. And the API that we're going to build, we're going to be setting the base authorization configuration as public. You then add data sources, and then you add your resolvers to those data sources. So you might say, okay, I've created this API. I need to have a NoSQL database. I need a SQL database. And then I need to have a way to map my resolvers for the types and the fields and the operations of my schema to those data sources. And then you define all this stuff really in code. And we're going to be working with TypeScript today.

So I think the most interesting thing though, like we talk a lot about this stuff, is the actual live demo because we're going to be starting from scratch building this out. So what I'm going to do is I'm going to go into a project that I've created here. This is a really empty CDK app. I'm going to go ahead and open this up. And in the lib directory, we have the entry point for the CDK app. And this is basically going to be where we're writing our code. And if we go to package.JSON, we'll see that I've installed three dependencies. AppSync for CDK, DynamoDB, which is a NoSQL database and AWS Lambda. So using all these things, we're going to build out an API in just a couple of minutes. So what I'd like to do first is go ahead and get my imports. I'm going to import CDK, AppSync, DynamoDB and Lambda.

9. Creating API Reference and GraphQL Schema

Short description:

We're going to create the API reference using the AppSync construct. The API name will be CDK Notes AppSync API. We'll set a default authorization configuration using API key and enable x-ray for additional logging. Then, we'll create the GraphQL schema for a notes app, including a note type, a query for listing notes, a mutation for creating notes, and a real-time subscription for on create note. The AWS_subscribe directive adds real-time functionality to the subscription.

And we're going to be using those to kind of create our API. Next, we're going to go ahead and create the API reference using the AppSync construct. And we're going to give the API a name. The API name is going to be CDK Notes AppSync API, and we'll call this like React Summit or something like that. I'll give a location for the GraphQL schema. This is going to be in GraphQL slash schema slash schema dot GraphQL, which we'll create in just a moment.

We then set a default authorization configuration. And for us, we're just going to be using API key. So we set that here and then we give an expiration and I'm setting that to expire 365 days from now. And then if you needed all multiple authorization types, we could have done that here. But we're not. And then I'm setting x-ray enable, because x-ray is basically a really sophisticated logging system that we can use for additional logging for debugging purposes.

The next thing we want to do is go ahead and create our GraphQL schema. So I'm going to go ahead and create a folder here and a schema dot GraphQL. And here we're going to go ahead and create our schema. And the schema that we're going to create is for a notes app. So we have a note type. We have a query for listing notes. We have a mutation for creating notes. And then we have the real time piece, which is the subscription here for on create note. So we're going to say we want to then have our, I'm sorry, at AWS underscore subscribe directive attached to this. And this is what adds the real time functionality. So like, if we look at the schema and we delete this, this is kind of all just basic GraphQL. This directive here is kind of app sync specific. But this is all you need to attach to any subscription to go ahead and set an array of mutations for the subscription to fire. No additional code is needed. So we're going to say we want to pass in an array, but the only item we're interested in is creating a note. We want to subscribe to that event. And then we're going to have this on create note subscription created for us. So I'm going to go ahead and close that.

10. Creating Lambda Function and Data Source

Short description:

We're creating a Lambda function called notes Lambda with a runtime of node.js. The code will be located in the Lambda functions folder, with the entry point as main.handler. We're setting the memory size to improve performance. Then, we're adding the Lambda data source to the API using the notes Lambda reference.

And what we want to do now is go ahead and create a Lambda function. And the Lambda function is going to be where our business logic or our logic for interacting with the database lives. So we're going to go ahead and say we're creating a Lambda function. We're referencing that as notes Lambda. We're saying new Lambda function. And I might minimize this over here to kind of get a better look at the code. We're setting a runtime. Runtime is node.js. We're giving a location for our code, which is this Lambda functions folder, and then an entry point, which is main dot handler. And then we're setting memory size, bumping that up a little bit to make this more performant. And then what we're doing is we're taking that API reference. So we created our API up here. And we're saying we want to do an add Lambda data source, and then we're passing in this notes Lambda right here. So we create the API. We're setting a Lambda data source. Now we need to go ahead and create that Lambda function code.

11. Creating Lambda Resolvers

Short description:

We're going to create a new folder called Lambda-fns to store our Lambda code. We'll add two resolvers, one for the ListNotes query and another for the create node mutation. These resolvers will pass the event into the Lambda function when called.

So what we're going to do is let's go ahead and create a new folder called Lambda-fns, and then that's where our Lambda code is going to live in just a moment. But for now, let's continue on. And what we want to do is we want to add our resolvers. And we need two resolvers because in our GraphQL schema, we have two operations. We have a query, and we have a mutation. The query is for ListNotes, so we're basically saying we want to resolve the ListNotes query into this function. So when this query is called, we're just passing that into the Lambda function in the event. And the same thing goes for the mutation. When a new node is created, when the create node resolver is fired, it's going to be passing the event into the Lambda function.

12. Creating DynamoDB Table and Lambda Functions

Short description:

We create a DynamoDB table called NotesTable to store all our data. We configure it to be serverless and set a partition key. We grant access to the table from our Lambda function and set an environment variable to reference the table name. We've now created the API, function, and table, and minimized the code to about 40 lines. Next, we'll create our Lambda functions in a notes.ts file and define the note type. We'll use TypeScript and have two operations: creating a note and listing notes. The event object in the Lambda function will contain info and arguments, which we'll use in the function.

And then finally, what we need is some type of database to work with. So we're going to create a DynamoDB table. And the DynamoDB table is going to be where we store all of our data.

So I'm creating a new table called NotesTable using the DynamoDB CDK construct. We're setting some basic configuration, setting this to be serverless by using pay per request, and we're setting a partition key, which is basically the primary key of ID. And then we're going to go ahead and grant access to the DynamoDB table from our Lambda function, basically saying, OK, this function can interact with this table.

And then we're calling the add environment function, or we're setting an environment variable by calling NotesLambda.addEnvironment. And what we're doing is basically saying, OK, we want to be able to access an environment variable called NotesTable, but we don't know the actual value of that yet. So we're just going to kind of set the environment variable there because we don't know the value of the actual table name. But we know we need to access that table. This way, in the Lambda function, we can reference process.env.NotesTable.

So basically we created the API, we created a function, we mapped the operations from our API into that function, and then we created a database table and enabled access from our Lambda function to that table. We did all of that. And really, if we minimize this, it would be something like 40 lines of code or something or less.

So now that all that is created, we're really done with our code on our actual CDK project. Now all we need to do is create our Lambda functions. So I'm going to have a notes.ts file. And here, we're going to have our note type. This is just going to map pretty closely to our GraphQL type. We're just going to be using this for our TypeScripts here. And what we want to do now is have a main.js. Oops, this actually needs to be TypeScript, so I'm going to rename that to ts. And this function, we're going to have our two operations that we're going to be importing and using in just a moment. One for creating a note against DynamoDB, one for listing notes. We have a type that we're creating that has a couple of different fields. One is the info object that has the field name, and one is the arguments object that has the note. And we're going to be basically using these two pieces of data, I guess you could say, coming off of the event that's coming into the lambda function. So when this function is invoked, the event is going to have an object. And it's going to have an event.arguments object. The arguments are the arguments passed into the function or into the operation.

13. Creating GraphQL Queries and Lambda Functions

Short description:

So createNotes and GetNoteById are GraphQL queries that we switch on to execute different functions. We have createNote.ts for creating new items in DynamoDB and listNotes.ts for scanning the table and returning all data. The main function in the Lambda functions folder is referenced as handler. After building and deploying the CDK stack, we can test the API in the AWS console by creating a note with the mutation create note and returning the ID, name, and completed value.

So createNotes would have a notes argument. GetNoteById might have a note ID. And then the field name is the actual GraphQL query itself, so, or the GraphQL operation itself. So the field name is going to be referenced down here as createNote or listNotes. So we're going to be switching on that field name. So we're going to say, okay, if it's createNote, we want to execute this function. If it's listNotes, we want to execute that function.

So with that being said, we need to go ahead and create those last two functions. So we have createNote.ts, and we have listNotes.ts. This is a Lambda function for interacting with DynamoDB. So we're basically creating a params object, taking the note out of the argument, and we're calling the document, dynamodb.document.put, basically creating a new item. This is not really what we're focused on, though, but this is some pretty basic code for interacting with DynamoDB from a Lambda function. And then the other operation is listNotes, and this is a DynamoDB scan. So we're basically going to say the params we need is – the only thing we need to know is the table name, which is coming off of the process.environment variable, and we're calling the document.client.scan, passing in these params, and this is just going to pull everything out of that table and then return it back to us.

So if I go back to my CDK, you can notice that I have this main.handler referenced here in the Lambda functions folder. If we go to our Lambda Functions folder, we go to main, we see that the main function here is called handler, so that's kind of how that's being referenced. And that's all we need to do, so let's go ahead and test this out. So, I'm gonna go ahead and say npm run build. And this is gonna go ahead and build out all of that TypeScript into JavaScript, which is what the service needs to run. And then we're gonna call CDK deploy, and then CDK deploy is gonna actually now look at our CDK stack, and it's gonna say, oh, we need all of this stuff to be deployed. We're ready to roll. All we have to do is say yes, and all of this infrastructure's code is gonna be deployed. This is gonna take maybe a couple of minutes.

Okay, so after the stack has been deployed, we can now go ahead and test this out. So, I'm gonna go into the AWS console, and we're gonna go to the API we just created by going to AppSync. And we're gonna then look for the Notes app. So, we have the Notes app here. We can now go into our queries, and we can say, mutation create note. And then, we'll just go ahead and return the ID, name. And I think we also have the completed value, which we'll go ahead and set here as false.

14. Querying and Subscribing to Notes

Short description:

Finally, we'll query the list of notes and set up a subscription for onCreateNote. This stack allows me to use my front-end skillset to build infrastructure code. CDK is a growing community that works well with Amplify. Check it out if you're interested in full stack cloud computing.

And then, finally, we'll just do a query of list notes. And here, we should go ahead and see the notes being returned from our API.

So, our API is up and running. Finally, we'll set up a subscription. And the subscription is going to basically be returning the same field, so let's copy those. And for onCreateNote, we want those. And now we have a subscription running, so if a new item is created, the subscription data would come through here.

So, that's really about it. I'm really excited about this stack because I get to use my front-end skillset, TypeScript, JavaScript, to kind of build out all of this infrastructure's code. CDK is a really cool community. It's growing really fast. It works really well with Amplify. If you're interested in full stack cloud computing, check it out. Follow me on Twitter at Dabbit3. Thank you for watching.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.
Vue.js London 2023Vue.js London 2023
30 min
Stop Writing Your Routes
The more you keep working on an application, the more complicated its routing becomes, and the easier it is to make a mistake. ""Was the route named users or was it user?"", ""Did it have an id param or was it userId?"". If only TypeScript could tell you what are the possible names and params. If only you didn't have to write a single route anymore and let a plugin do it for you. In this talk we will go through what it took to bring automatically typed routes for Vue Router.
React Day Berlin 2023React Day Berlin 2023
21 min
React's Most Useful Types
We don't think of React as shipping its own types. But React's types are a core part of the framework - overseen by the React team, and co-ordinated with React's major releases.In this live coding talk, we'll look at all the types you've been missing out on. How do you get the props type from a component? How do you know what ref a component takes? Should you use React.FC? And what's the deal with JSX.Element?You'll walk away with a bunch of exciting ideas to take to your React applications, and hopefully a new appreciation for the wonders of React and TypeScript working together.
TypeScript Congress 2023TypeScript Congress 2023
31 min
Making Magic: Building a TypeScript-First Framework
I'll dive into the internals of Nuxt to describe how we've built a TypeScript-first framework that is deeply integrated with the user's IDE and type checking setup to offer end-to-end full-stack type safety, hints for layouts, middleware and more, typed runtime configuration options and even typed routing. Plus, I'll highlight what I'm most excited about doing in the days to come and how TypeScript makes that possible not just for us but for any library author.

Workshops on related topic

React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Featured WorkshopFree
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.
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Featured WorkshopFree
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
React Advanced Conference 2022React Advanced Conference 2022
148 min
Best Practices and Advanced TypeScript Tips for React Developers
Featured Workshop
Are you a React developer trying to get the most benefits from TypeScript? Then this is the workshop for you.In this interactive workshop, we will start at the basics and examine the pros and cons of different ways you can declare React components using TypeScript. After that we will move to more advanced concepts where we will go beyond the strict setting of TypeScript. You will learn when to use types like any, unknown and never. We will explore the use of type predicates, guards and exhaustive checking. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.
React Advanced Conference 2022React Advanced Conference 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.
Prerequisites: - Node.js installed on your machine (12.2.X / 14.X)- It is recommended (but not required) to use VS Code for the practical tasks- An IDE installed (VSCode recommended)- (Good to have)*A basic understanding of Node.js, React, and TypeScript
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL for React Developers
Featured Workshop
There are many advantages to using GraphQL as a datasource for frontend development, compared to REST APIs. We developers in example need to write a lot of imperative code to retrieve data to display in our applications and handle state. With GraphQL you cannot only decrease the amount of code needed around data fetching and state-management you'll also get increased flexibility, better performance and most of all an improved developer experience. In this workshop you'll learn how GraphQL can improve your work as a frontend developer and how to handle GraphQL in your frontend React application.
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.