Skip to content

This Dot Blog

This Dot provides teams with technical leaders who bring deep knowledge of the web platform. We help teams set new standards, and deliver results predictably.

Newest First
Tags: GraphQL
Leveraging GraphQL Scalars to Enhance Your Schema cover image

Leveraging GraphQL Scalars to Enhance Your Schema

Explore the transformative power of GraphQL scalars with the graphql-scalars library, designed to extend the default scalar types in GraphQL schemas....

Introducing the New Serverless, GraphQL, Apollo Server, and Contentful Starter kit cover image

Introducing the New Serverless, GraphQL, Apollo Server, and Contentful Starter kit

Introducing the new Serverless, GraphQL, Apollo Server, and Contentful Starter kit The team at This Dot Labs has released a brand new starter kit which includes the Serverless Framework, GraphQL, Apollo Server and Contentful configured and ready to go. This article will walk through how to set up the new kit, the key technologies used, and reasons why you would consider using this kit. Table of Contents - How to get started setting up the kit - Generate the project - Setup Contentful access - Setting up Docker - Starting the local server - How to Create the Technology Model in Contentful - How to seed the database with demo data - How to work with the migration scripts - Technologies included in this starter kit - Why use GraphQL? - Why use Contentful? - Why use Amazon Simple Queue Service (SQS)? - Why use Apollo Server? - Why use the Serverless Framework? - Why use Redis? - Why use the Jest testing framework? - Project structure - How to deploy your application - What can this starter kit be used for? - Conclusion How to get started setting up the kit Generate the project In the command line, you will need to start the starter.dev CLI by running the npx @this-dot/create-starter command. You can then select the Serverless Framework, Apollo Server, and Contentful CMS kit and name your new project. Then you will need to cd into your new project directory and install the dependencies using the tool of your choice (npm, yarn, or pnpm). Next, you will need to Run cp .env.example .env to copy the contents of the .env.example file into the .env file. Setup Contentful access You will first need to create an account on Contentful, if you don't have one already. Once you are logged in, you will need to create a new space. From there, go to Settings -> API keys and click on the Content Management Tokens tab. Next, click on the Generate personal token button and give your token a name. Copy your new Personal Access Token, and add it to the CONTENTFUL_CONTENT_MANAGEMENT_API_TOKEN variable. Then, go to Settings -> General settings to get the CONTENTFUL_SPACE_ID. The last step is to add those CONTENTFUL_CONTENT_MANAGEMENT_API_TOKEN and CONTENTFUL_SPACE_ID values to your .env file. Setting up Docker You will first need to install Docker Desktop if you don't have it installed already. Once installed, you can start up the Docker container with the npm run infrastructure:up command. Starting the local server While the Docker container is running, open up a new tab in the terminal and run npm run dev to start the development server. Open your browser to http://localhost:3000/dev/graphql to open up Apollo server. How to Create the Technology Model in Contentful To get started with the example model, you will first need to create the model in Contentful. 1. Log into your Contentful account 2. Click on the Content Model tab 3. Click on the Design your Content Modal button if this is your first modal 4. Create a new model called Technology 5. Add three new text fields called displayName, description and url 6. Save your new model How to seed the database with demo data This starter kit comes with a seeding script that pre-populates data for the Technology Content type. In the command line, run npm run db:seed which will add three new data entries into Contentful. If you want to see the results from seeding the database, you can execute a small GraphQL query using Apollo server. First, make sure Docker, and the local server(npm run dev) are running, and then navigate to http://localhost:3000/dev/graphql. Add the following query: ` When you run the query, you should see the following output. ` How to work with the migration scripts Migrations are a way to make changes to your content models and entries. This starter kit comes with a couple of migration scripts that you can study and run to make changes to the demo Technology model. These migration scripts are located in the scripts/migration directory. To get started, you will need to first install the contentful-cli. ` You can then login to Contentful using the contentful-cli. ` You will then need to choose the Contentful space where the Technology model is located. ` If you want to modify the existing demo content type, you can run the second migration script from the starter kit. ` If you want to build out more content models using the CLI, you can study the example code in the /scripts/migrations/01-create-technology-contentType.js file. From there, you can create a new migration file, and run the above contentful space migration command. If you want to learn more about migration in Contentful, then please check out the documentation. Technologies included in this starter kit Why use GraphQL? GraphQL is a query language for your API and it makes it easy to query all of the data you need in a single request. This starter kit uses GraphQL to query the data from our Contentful space. Why use Contentful? Contentful is a headless CMS that makes it easy to create and manage structured data. We have integrated Contentful into this starter kit to make it easy for you to create new entries in the database. Why use Amazon Simple Queue Service (SQS)? Amazon Simple Queue Service (SQS) is a queuing service that allows you to decouple your components and process and store messages in a scalable way. In this starter kit, an SQS message is sent by the APIGatewayProxyHandler using the sendMessage function, which is then stored in a queue called DemoJobQueue. The SQS handler sqs-handler polls this queue, and processes any message received. ` Why use Apollo Server? Apollo Server is a production-ready GraphQL server that works with any GraphQL client, and data source. When you run npm run dev and open the browser to http://localhost:3000/dev/graphql, you will be able to start querying your Contentful data in no time. Why use the Serverless Framework? The Serverless Framework is used to help auto-scale your application by using AWS Lambda functions. In the starter kit, you will find a serverless.yml file, which acts as a configuration for the CLI and allows you to deploy your code to your chosen provider. This starter kit also includes the following plugins: - serverless-offline - allows us to deploy our application locally to speed up development cycles. - serverless-plugin-typescript - allows the use of TypeScript with zero-config. - serverless-dotenv-plugin - preloads function environment variables into the Serverless Framework. Why use Redis? Redis is an open-source in-memory data store that stores data in the server memory. This starter kit uses Redis to cache the data to reduce the API response times and rate limiting. When you make a new request, those new requests will be retrieved from the Redis cache. Why use the Jest testing framework? Jest is a popular testing framework that works well for creating unit tests. You can see some example test files under the src/schema/technology directory. You can use the npm run test command to run all of the tests. Project structure Inside the src directory, you will find the following structure: ` This given structure makes it easy to find all of the code and tests related to that specific component. This structure also follows the single responsibility principle which means that each file has a single purpose. How to deploy your application The Serverless Framework needs access to your cloud provider account so that it can create and manage resources on your behalf. You can follow the guide to get started. Steps to get started: 1. Sign up for an AWS account 2. Create an IAM User and Access Key 3. Export your AWS_ACCESS_KEY_ID & AWS_SECRET_ACCESS_KEY credentials. ` 4. Deploy your application on AWS Lambda: ` 5. To deploy a single function, run: ` To stop your Serverless application, run: ` For more information on Serverless deployment, check out this article. What can this starter kit be used for? This starter kit is very versatile, and can be used with a front-end application for a variety of situations. Here are some examples: - personal developer blog - small e-commerce application Conclusion In this article, we looked at how we can get started using the Serverless, GraphQL, Apollo Server, and Contentful Starter kit. We also looked at the different technologies used in the kit, and why they were chosen. Lastly, we looked at how to deploy our application using AWS. I hope you enjoy working with our new starter kit!...

Class and Enum Typings for Handling Data with GraphQL cover image

Class and Enum Typings for Handling Data with GraphQL

Intro Today we’ll talk about class and enum typings for handling more complex data with GraphQL. The typings will be used on class objects to make them easier to read and understand. This blog will build on the concepts of another blog found here, in which I discussed wrapping and enhancing data, which talks about how to create a GraphQL Rest API wrapper, and how to enhance your data. This article assumes you have a basic understanding of classes, typing, and enums. Here is the code repo if you want to review it while reading, or just skip ahead. With that said, we will look at the class structure we’re going to be using, the enums, and the type lookup for our customField enum with our mapper. Class setup This class we’re going to set up will be strictly for typing. We’re going to make a RestaurantGuest class as this data will be restaurant themed. So in our restaurant.ts file, we will name it RestaurantGuest, and include a few different items. *Basic starting class example* ` After setting that up, we will add a type that will reference the above class. *Type example* ` This type will be used later when we do the type lookup in conjunction with our mapper function. With the above finished, we can now move on to handling our enums. Handling enums We’ll now create our Enum to make dealing with our complex data easier. Since the above 3249258 represents FoodReservation, we will create an enum for it. Now you might be wondering why 3249258 represents FoodReservation. Unfortunately, this is an example of how data can be returned to us from a call. It could be due to the field id established in a CMS such as Contentful, or from another source that we don’t control. This isn’t readable, so we’re creating an Enum for the value. *Enum example* ` This will be used later during our type look-up. Type lookup Now we can start combining the enum from above with our class type, and a look-up type that we’re about to create. So let's make another type called RestaurantGuestFieldLookup, which will have an id and value. *Look-up type example* ` Perfect, now we’ll swap out ` to be ` We can now move on to creating and using our mapper. In a separate file called mapper.ts, we will create our restaruantGuestMapper function. ` Tada! Thanks to all the work above, we can easily understand and get back the data we need. Conclusion Today's article covered setting up a typing class, creating an enum, and type lookup with a mapper for more complex data handling with GraphQL. Hopefully, the class structure was straightforward and helpful, along with the enums and type lookup and formatting examples. If you want to learn more about GraphQL, read up on our resources available at graphql.framework.dev....

How to Resolve Nested Queries in Apollo Server cover image

How to Resolve Nested Queries in Apollo Server

When working with relational data there will be times when you will need to access information within nested queries. But how would this work within the context of Apollo Server?...

How to Optimize GraphQL Performance with Redis cover image

How to Optimize GraphQL Performance with Redis

Intro GraphQL is a great way to build backend applications. It simplifies the project’s structure and scales easily, but there are some challenges that come with it. One of the biggest is how to optimize GraphQL at scale. In this post, we will show you how to use Redis as an optimization tool for your GraphQL servers. What is Redis? Redis is an open-source database that can be used with any programming language. It is well-suited for large-scale applications. It’s a key-value store that can be used to store and retrieve data. It is designed to be fast, with no single point of failure. It also provides a high degree of concurrency, which means it's possible for multiple clients to access the same data at the same time. Redis is also lightweight enough that you can run it in the cloud. Why GraphQL? GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools. Why Redis with GraphQL? Redis can be your best friend when it comes to optimizing the performance of GraphQL. First, Redis provides a powerful system that helps you to cache queries and results so that they can be reused. This is crucial because there's no way to predict how often you'll need to run a query on a serverless architecture. Sometimes you use a 3rd party API that is slow, or there are request limits, or even the local databases could take a quite long time to return the data. If you're creating tons of different queries every day, this can add up quickly! Different caching strategies There are two main caching strategies that you can use with GraphQL and Apollo Server: 1. Caching the entire response (use Redis as a cache) Caching the whole response is the most straightforward way to cache your GraphQL queries. When you cache the entire response, you're essentially caching the entire query, including all of the fields that are returned by the query. This is a great option if you're only interested in caching the data that are returned by the query, and you don't need to worry about caching any of the other data that is returned by the query, or if you have a repeatable query for different users. Example of in-memory cache: 2. Caching individual fields (use Redis as a data store) This is a more proper way to cache your GraphQL queries. It's also a more complex way to cache queries in Apollo Server. When you cache individual fields, you're caching the individual fields that are returned by the query. This is a great option if you're only interested in caching the data that are returned by the query, and you don't need to worry about caching any of the other data that are returned by the query. What not to cache? Redis is not built for large data. If you're storing critical business data, you're going to need a more traditional data solution. If you're looking for a way to store complex data queries, look elsewhere. Redis is designed to be simple and fast, but that doesn't mean it's ready for just about anything. Even if you think your data could grow into a large enough set that it would benefit from relational databases, remember that Redis does not have support for building relational databases from scratch. It has no support for tables or relationships or any other kind of constraints that would be required if your data was stored in a relational database. Conclusion In this post, we showed you how to use Redis as an optimization tool for your GraphQL. We also showed you how to use Redis as a cache and as a data store. We hope you found this post helpful! Also, check out our GraphQL Serverless Contentful starter kit on Starter.dev If you have any questions or comments, please feel free to send them to us by email at hi@thisdot.co. Thanks for reading!...

How to Create a GraphQL Rest API Wrapper and Enhance Your Data cover image

How to Create a GraphQL Rest API Wrapper and Enhance Your Data

Intro Today we will talk about wrapping a REST API with a GraphQL wrapper, which means that the REST API will be accessible via a different GraphQL API. We’ll be using Apollo Server for the implementation. This article assumes you have a basic understanding of REST API endpoints, and some knowledge of GraphQL. Here is the code repo if you want to review it while reading. With that said, we will be looking at why you would wrap a REST API, how to wrap an existing REST API, and how you can enhance your data using GraphQL. Why wrap a REST API with GraphQL There are a couple of different reasons to wrap a REST API. The first is migrating from an existing REST API, which you can learn about in detail here, and the second is creating a better wrapper for existing data. Granted, this can be done using REST. But for this article, we will focus on a GraphQL version. A reason for creating a better wrapper would be using a CMS that provides custom fields. For instance, you get a field that is listed as C_435251, and it has a value of 532. This doesn’t mean anything to us. But when looking at the CMS these values could indicate something like “Breakfast Reservation” is set to “No”. So, with our wrapping, we can return it to a more readable value. Another example is connecting related types. For instance, in the code repo for this blog, we have a type Person with a connection to the type Planet. *Connection example* ` How to Wrap a REST API Alright, you have your REST API, and you might wonder how to wrap it with GraphQL? First, you will call your REST API endpoint, which is inside your rest-api-sources file inside your StarwarsAPI class. *REST API example* ` This above class will then be imported and used in the server/index file to set up your new Apollo server. *Apollo server example* ` Now, in your GraphQL resolver, you will make a person query and retrieve your starWarsAPI from it, which contains the information you want to call. *GraphQL resolver* ` With the above done, let's start on how to enhance your data in the resolver. Enhancing your data With our resolver up and running, we’ll now use it to enhance some of our data. For now, we’ll make the name we get back returned in a first name, and the last initial format. To do so above our Query, we’ll start a Person object and put the variable name inside it. We’ll then grab the name from our Query and proceed to tweak it into the format we want. *Enhancing in resolver* ` Tada! Now, when we call our GraphQL, our name will return formatted in a first name, and last initial state. Conclusion Today's article covered why you want to wrap a REST API with GraphQL for migration or to provide a better API layer, how to wrap an existing REST API with GraphQL, and how you can use the resolver to enhance your data for things like name formatting. I hope it was helpful, and will give others a good starting point. If you want to learn more about GraphQL and REST API wrappers, read up on our resources available at graphql.framework.dev....

Ship Less JavaScript with GraphQL Resolvers cover image

Ship Less JavaScript with GraphQL Resolvers

In this article, I want to highlight some ways that we can use GraphQL and tools like Apollo Server to reduce the amount of JavaScript that gets shipped in our bundles....

Federation, Roadmaps, GraphiQL & more: GraphQL Contributor Day | May 3, 2022 cover image

Federation, Roadmaps, GraphiQL & more: GraphQL Contributor Day | May 3, 2022

The latest GraphQL Contributor Day Event focused on new updates to the GraphQL ecosystem, including packages like GraphiQL, GraphQL DataLoader, and other GraphQL clients. Topics covered at this event included GraphQL federation, industry best practices, the latest available features, and roadmaps for tools like DataLoader. Don't forget about the upcoming GraphQL Conf scheduled for June 7th, 2022! Here is a complete list of the hosts and guests that attended the online event. Hosts - Dustin Goodman, Engineering Manager, This Dot Labs, @dustinsgoodman - Tanmai Gopal, Founder, Hasura, @tanmaigo Guests - Adhithi Ravichandran, Software Consultant at Surya Consulting Inc., @AdhithiRavi - Eitan Joffe, CTO at Inigo Labs, @eitanjoffe - Gabriel Nordeborn, Partner at Arizon, @_zth_ - Jamie Barton, Full Stack Developer, @notrab - Joey Nenni, Staff Engineer at Paypal, @JoeyNenni - Kyle Schrade, Senior Software Engineer at StockX, @notkyleschrade - Mandi Wise, Senior Manager Solutions Architecture at Apollo, @mandiwise - Marc-André Giroux, Senior Software Developer at Netflix, @xuorig - Roy Derks, Developer Relations at StepZen, @gethackteam - Uri Goldshtein, Founder of The Guild, @UriGoldshtein You can watch the entire GraphQL Contributor Day event on This Dot Media's YouTube Channel. New GraphQL Updates GraphiQL Updates The latest GraphiQL updates include: - A newly proposed design - Support for multiple operation tabs - Support for design customization of GraphiQL itself - A proposal for new official maintainance structure on how to manage the project, the people, and PR approval for the repository Dataloader Updates According to Uri Goldshtein, The Guild will maintain DataLoader. New versions already released, and more are planned for the future, including releases that enable Typescript migration. The roadmap for DataLoader's future releases are in place. If you have any suggestions for improvements, check out the Dataloader Roadmap. If you want to learn more about DataLoaders, Jamie Barton and This Dot Media have free trainings available. You can check out Jamie's video Batching with DataLoader or This Dot's Intro to GraphQL DataLoaders. The panelists were interested in the possibility of DataLoaders being brought into GraphQL as an internal implementation. However, no such implementation currently exists, and most of the present work involves trying to bring the repo up-to-date while answering the community’s questions, and providing documentation. How does DataLoader differ from Apollo's DataSource concept? Apollo's data sources is a great tool for retrieving data from a given source, such as REST APIs and databases. Like DataLoaders, data sources attempt cache results to avoid double fetches. With DataSource, you can abstract some of the data fetching methods, and easily connect to the methods. There isn't anything built into Datasource around batching, but it does support some mechanism for caching and data fetching. GraphQL Conf 2022 GraphQL Conf 2022 is coming to Houston, Texas on June 7th. The panelists were excited to finally attend an in-person event again, and were also thrilled to know that the event would be in partnership with the Openjs Foundation. GraphQL Conf is a conference for GraphQL enthusiasts focused on GraphQL tooling and implementations. Visit GraphQL Conf 2022 if you're interested in speaking at, or attending the conference. GraphQL Server Side Updates GraphQL Yoga GraphQL Yoga was created, and is maintained, by Prisma. But, it was shelved for priority reasons, and The Guild subsequently took over its maintenance. The team at The Guild has rebuilt the 2.0 version from the ground-up, and v2.0 is fully customizable, user-friendly, and supports all platforms. Try GraphQL Yoga 2.0 yourself! GraphQL Clients for Java, Go and others GraphQL clients for other languages like Java, and Golang include: - Java GraphQL Client - DGS Framework is a framework for Java and Kotlin. - Ent framework from Facebook for Golang - Fezzik's Fully generated Golang Graphql Client by Inigo Labs - genqlient: a truly type-safe Go GraphQL client by Khan Academy. Key Update on Relay The Relay team has been working on the Client Control Nullability proposal for more than three months, and has also been working to bring Client Side State into Relay. Are there specifics on how Relay can work with React Native? Relay is separated into three different packages: - The compiler, which scans the entire project and compiles your queries. - The Relay runtime, which is the actual store and cache. - The React Relay, which ties everything together. There is also binding for Apollo, which is maintained by the community, and a full port of Relay to Swift, so it is possible to use it with other clients. Relay's core is fully usable, and can even be used on the server. GraphQL CodeGen TypedDocumentNode is one of GraphQL Codegen's newly highlighted features. This allows users to take GraphQL strings, and receive typed results with CodeGen using TypeScript. You can also write fragments inside of your components, and get the typed results of that query inside of the same components. This reduces the number of types imported from a single file, which decreases bundle size through treeshaking. Finally, even with a flag, you can enable fragment masking, which ensures that you are just using the data that is inside of the TypeScript component. Conclusion This was an incredible conversation with a great group of guests, and I would highly suggest you watch the video to hear more about best practices and code federation. You can watch the full GraphQL Contributor Day event on This Dot Media's YouTube Channel....

State Of GraphQL Wrap-up cover image

State Of GraphQL Wrap-up

One of the first events of 2022 wrapped up in a spectacular way. The State of GraphQL included many wonderful people and presented a number of interesting topics and questions. Before we get into the key take-aways, I would highly suggest you watch the live stream for a more in-depth and highly entertaining experience. Let's get started with introducing our hosts and panelists for The State Of GraphQL. 🗣 Hosts 👉 Dustin Goodman - @dustinsgoodman 👉 Eve Porcello - @eveporcello 🗣 Panelists 👉 Roy Derks - @gethackteam - Hackteam - StepZen 👉 Janessa Garrrow - @janessagarrow - Apollo 👉 Milecia McGregor - @flippedcoding - Iterative 👉 Jamie Barton - @notrab - Graphql Screencasts - Graph CMS: The GraphQL Headless CMS Key Points The State of GraphQL live-stream consisted of numerous questions, and discussions presented by our panelists and viewers on Youtube. There are a lot of advantages when using GraphQL. Having one endpoint to dynamically and effectively gather different types of information is useful. However, one of the biggest obstacles for people switching from REST to GraphQL is the relatively complexity of setting up and using GraphQL. There are more and more tools coming to market that aim at easing that burden. Some of the questions that were asked were: - If you could add one thing to the #graphql spec, what would it be? - With so many GraphQL tools and options out there, how do you choose which to use? Based on comfort? Requirements? Project scope? - Are there any community events that you’re excited about? - Is GraphQL a viable communication protocol for IoT devices? - Right now the hardest thing about implementing GraphQL is the scheming (coming from REST). Is there anything that has been a blocker for you in implementing GraphQL? - Where do you lie on the REST vs GraphQL scale? - What are you most excited about in the GraphQL space right now?...

Announcing Angular GitHub Clone for starter.dev showcases cover image

Announcing Angular GitHub Clone for starter.dev showcases

The Engineering team at This Dot Labs loves building open-source software, providing resources to the community, and collaborating with our clients and partners. In cooperation with the Angular team, we have developed an implementation of GitHub’s user interface to deliver a project to the community that demonstrates the power of Angular while providing a fully featured open-source application for developers to use as a learning tool. We’re including this Angular GitHub Clone as part of a new initiative we’re working on called “starter.dev GitHub showcases”, and we are excited about its future. If you want to jump into the code, visit the GitHub repository, or you can check out the deployed application at https://angular-apollo-tailwind.starter.dev/. --- Our Goals Based on the initial projects by Trung Vo (Spotify clone / JIRA clone), we were looking to create an example project that goes beyond the basics of a TodoMVC application and really showcases the power of the technology. Specifically, we wanted to showcase Angular with routing, forms, and global state management. What we built For this project, we utilized Angular v13 with Apollo Client and Tailwind CSS to bring a GitHub user interface to life that features: User login via GitHub OAuth User Dashboard featuring a user’s top repositories and gists for quick access Repositories including file tree exploration, file viewing, issue lists with filtering, and pull requests with filtering User Profiles with near feature parity with the GitHub UI We also created a Serverless Framework based server to manage the OAuth handshake between the application and GitHub servers for security purposes. Why Apollo Client? At This Dot Labs, we love GraphQL, and GitHub has an amazing Public GraphQL API for consumption that we were able to leverage to build all the features in this application. Angular Apollo Client provides us with a GraphQL client and global state management out of the box. Check out our Issues Store to see how we were able to leverage Apollo Client to fetch data from Github and inject it into a ComponentStore for consumption. Why TailwindCSS? Other projects we’ve seen demonstrate how to extend existing component libraries, and we didn’t want to replicate this behavior. Instead, we thought it would be great to demonstrate how to use a CSS utility framework in conjunction with Angular component stylesheets. This afforded us an opportunity to show the Angular community the power of a new tool and further community excitement around a framework agnostic technology that has reshaped the CSS space. Why Serverless Framework? We wanted an easy to use backend ecosystem for any developers wanting to fork and test this application. Additionally, for those looking to deploy this backend, we wanted to find an economical solution. With the serverless-offline plugin, we were able to provide a local first development environment to developers while giving them the ability to ship the API to their favorite cloud hosting provider that supports serverless functions. How to use starter.dev showcases We recommend starting with an exploration of the codebase. To get started, follow these steps: ` In both .env files, you’ll see missing values for GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET. To generate these values, please follow GitHub’s Creating an OAuth App instructions to generate your personal client and secret that you can then input into your .env files. Now, you can run yarn start in both directories and point your browser to localhost:4200 to see the app running. From here, you can start exploring and experimenting with project components. What should I do next? The project README includes several ideas and features that we’ve vetted for feasibility. We’ve given some high level details about the feature and included how difficult we believe it will be to accomplish. We think these are great features to both improve the app and provide you with an opportunity to experience Angular without having to start your own project or find projects that need contributions. New to Angular and want feedback on your approach? Send us a pull request with your changes, and we’d be happy to review it and provide feedback. If it’s the first submission for a particular feature, we’d love to include your change and attribute it back to you. --- We plan on extending starter.dev showcases to include more Angular stacks and examples to give the community even more resources. If you’re interested in contributing to starter.dev showcases or have ideas for new features or showcases, we’d love to hear from you. Our GitHub issues are open for collaboration and pull requests are always welcome, but not required....

GraphQL Contributor Days | December 2021 cover image

GraphQL Contributor Days | December 2021

This is a recap of the December GraphQL Contributor Days, an event where maintainers and contributors came together to talk about all things current and upcoming in the GraphQL realm! Read on or rewatch the event here to see what these experts have to share, and see what they're using at companies such as Facebook, PayPal, Hasura, and Netflix. Our hosts for this event were Dustin Goodman and Tanmai Gopal. Panelists * Adhithi Ravichandran, @AdhithiRavi * Conor Hastings @stillconor * Jamie Barton, @notrab * Joey Nenni, @JoeyNenni * Jon Wong, @jnwng * Lee Byron, @leeb * Marc-André Giroux, @\_\_xuorig\_\_ * Roy Derks, @gethackteam * Tejas Kumar, @TejasKumar_ * Uri Goldshtein, @UriGoldshtein * Kyle Schrade, @NotKyleSchrade * Patrick Arminio, @patrick91 * Gabriel Nordeborn, @\_\_\_zth\_\_\_ Community Showcase & Updates GraphQL Yoga (Uri Goldshtein) GraphQL Yoga 2.0 has been in the works for the past few months, and it’s finally launched its alpha! This version is shipping with Envelop, and includes support for deferring streams, live queries, and the latest GraphiQL IDE. RescriptRelay CLI (Gabriel Nordeborn) A new feature has been added to the RescriptRelay CLI! This new command has the ability to go through your code and remove all unused fields and fragments from your GraphQL queries, which in turn helps prevent over-fetching in your application. ` GraphQL Learning What can we do to support or easily onboard team members that may be new to GraphQL? What challenges do we face? Our panelists shared some of their favorite resources and methods that have worked for their teams, as well as brought up some great points about resources the community is still lacking. The general consensus was that folks coming from REST can have trouble learning the GraphQL way of doing things. Things like introspection & HTTP 200 blanket responses can cause errors and introduce security risks that may be overlooked by those learning GraphQL for the first time. Our panelists also agreed that there’s a need for concise resources outlining some of these common pitfalls, and there’s also a need for a simple, language-agnostic GraphQL starter package (think Create React App, but for GraphQL). Unfortunately, these resources don’t seem to exist just yet. However, our panelists did still have some great tips and resources to share for those trying to learn GraphQL. - Kyle Schrade had a couple suggestions that worked for his team: - Create internal documentation where you can keep track of answers to common questions. - Create a Codegen so that it’s easier for new team members to set up subgraphs. - Adhithi Rhavichandran shared a great Pluralsight course she co-authored on GraphQL API’s with Apollo. This is a great language-agnostic intro to GraphQL that talks about the differences between GraphQL and REST. - Jamie Barton created graphql.wtf to provide the GraphQL community with short, digestible videos on GraphQL concepts. Authorization & Security How can we handle authorization and security for our GraphQL API’s? What kinds of considerations need to be made? There is no “one size fits all” in handling authorization in GraphQL API’s. With regards to where one should place their authorization logic, some argued for placing this logic at the resolver level (keeping auth logic close to business logic), while others wished to raise this logic up to a top layer to keep responsibilities separate. If the latter is your preference, Uri Goldshtein recommended GraphQL Authz for easily adding an authorization layer to your GraphQL API. This library is compatible with all modern GraphQL architectures as well. As mentioned earlier, there were some differing ideas around whether or not to allow schema introspection. Though some saw it as a potential security risk, Joey Nenni argued that the benefits for developers can be enormous and provide a better user experience. If you've properly secured your API, there shouldn't be any significant risks involved with allowing schema introspection. Federation What are the benefits and challenges of federating? A pain point for Roy Derks is that underlying services need to be ready for federation. "It'd be nice if every schema could be federated with any schema," he said. Tanmai Gopal suggested that it'd be best to do configuration at the GraphQL entry point, rather than at the service level in order to tackle that problem. What companies use federation, and how are they implementing it? Many of our panelists' companies are either actively using or planning to use Apollo Federation. Tanmai Gopal, founder of Hasura, said that Hasura does federation in two steps - service to service federation, and data source to data source federation. At PayPal, Staff Engineer Joey Nenni shared that they're currently working on implementing the Apollo Federation spec. Marc-André Giroux also shared that Netflix uses the Apollo Federation spec, though they have their own gateway built in Kotlin. The observability federation brings to their API, and the way federation fits within Netflix's microservice architecture works "beautifully" on his team. However, federating a monolith is perhaps not the best idea. Lee Byron, co-creator of GraphQL, agreed and shared that Facebook has a different approach. "I think federation brings a lot of value, but at a lot of cost," he explained. Schema registries, query plans, and all of the other "stuff" that comes with federation can be a lot to manage. > "Facebook doesn’t use any of that ... instead they use a model ... where you have a single definition of your schema that exists at your gateway." - Lee Byron Federation can be a great fit if your organization isn't a monolith and values team autonomy. "\[At Facebook] team autonomy is an anti-pattern," Lee joked. Teams that value autonomy or that may not share a unified language, on the other hand, may find a lot of value in federating. Other panelists agreed that company culture and team structure play a big part in determining whether to use a monolith or microservice structure, which can also determine whether or not federation is a good fit for your project. Culture can be very difficult to change, and may not even be possible. > "Regardless of the decision the net result is very similar. … However it is that we arrive at that conclusion, it doesn’t matter that much, and so we should choose the one that is easier for your organization." - Lee Byron What's new at GraphQL Foundation? - The Working Group, which contributes changes to the GraphQL spec, is about to run a vote for the leaders of their technical steering committee. This steering committee will be responsible for overseeing the Working Group. - The GraphQL Foundation has a bunch of new members and sponsors, which has allowed them to launch a brand new community grant program in order to redistribute some of those funds and encourage community-driven development. You can find the grant program here! - There's a newly released cut of the GraphQL spec! That's a Wrap! GraphQL Contributor Days is always a great way to keep your ear to the ground on what's coming in the GraphQL ecosystem. This month's event provided some fascinating insight into how some of the top companies in the world are using GraphQL. If you'd like to watch the full event and hear our panelists dive deeper on some of these topics (and more), you can find it here!...

JavaScript Marathon: Intro to GraphQL DataLoaders cover image

JavaScript Marathon: Intro to GraphQL DataLoaders

As a part of JavaScript Marathon week, Star Richardson, Software Engineer at This Dot Labs, presented a session on GraphQL DataLoaders. She discussed the following topics: What are GraphQL DataLoaders? A dataloader is a generic utility used as part of your application's data fetching layer to provide a simplified and consistent API over various remote data sources, such as databases or web services, via batching and caching. In sum, it is a very small library that provides batching and caching around your APIs. DataLoaders can be used on any JavaScript project. Why use DataLoaders? DataLoaders can be used on any JavaScript project, but they work especially well with GraphQL because GraphQL has an “N + 1” problem, and DataLoaders are here to solve it! What is N + 1 problem? The problem is that in practice, you wouldn't just have one join. Your review data model might include associations with any number of other models, each one requiring its own join clause. Additionally, those models might have relationships to other models themselves. Trying to craft a single SQL query that will account for all possible GraphQL queries becomes not only difficult but also prohibitively expensive. A client might request only the reviews with none of their associated models, but the query to fetch those reviews now include 30 additional, unnecessary views. That query might have taken less than a second, but now takes 10. You can read more about this problem here. Let’s start with First, install DataLoaders: ` Second, Create DataLoader instance. Finally, create a batching function. Create your first DataLoader First, create a new file and import the DataLoader library. ` Then, import the model you want. For example: ` Next, create the DataLoader instance for this model. ` You may be wondering: what is the getBatchCharacters? Well it’s the batching function that we discussed before. Let’s create it! Batching Functions Batching functions for GraphQL Dataloaders need to follow the next specific structure in order to work with DataLoaders! DataLoaders expect your batching function to accept an array of keys and return a promise that resolves to an array of values or errors. It’s very important that the array or the promise that it resolves to an array that you're returning is the same length and in the same order of the keys that you are receiving. So our batching function will be for example like this: ` And then export the dataloader: ` If you missed the JavaScript marathon session on DataLoaders, you can check out the video here!...