GraphQL

GraphQL Updates- October 2021

Oct 20, 2021

5 min read

State of GraphQL

State of GraphQL brings together core contributors, members of the GraphQL Foundation, and community leaders to talk about the future of GraphQL, and answer audience questions.

Hosts

Tracy Lee, CEO, This Dot Labs
Eve Porcello, Co-founder & Instructor, Moon Highway

Panelists

Uri Goldshtein, Founder, The Guild
Carlos Rufo, Engineering Lead, GraphCMS
Joey Nenni, Web Engineering Lead (GraphQL), PayPal
Janessa Garrow, Developer Experience Engineer, Apollo GraphQL
Tanmai Gopal, Founder, Hasura

GraphQL Updates

The first portion of the State of GraphQL covered updates from each panelist.

The GraphQL Foundation

One of the first topics covered by State of GraphQL was The GraphQL Foundation.

The GraphQL Foundation is a neutral foundation founded by global technology and application development companies. The GraphQL Foundation encourages contributions, stewardship, and a shared investment from a broad group in vendor-neutral events, documentation, tools, and support for GraphQL.

GraphQL.org

Uri opened up the conversation by emphasizing how open the foundation is. The GraphQL Foundation has always been open, but it's now easier than ever to become part of the community. The true "meat" of where the GraphQL action is though is in the GraphQL Working Group. There, topics such as changes to the GraphQL spec, ideas for new features, and more are discussed. Also, all the meetings are recorded and even summarized by text!

Apollo Odyssey

Odyssey is Apollo's free interactive learning platform.

Janessa from the Apollo team introduced us to Apollo Odyssey. Odyssey is Apollo's official learning platform. It was created to improve the developer experience of learning GraphQL. While some people may be able to learn effectively from docs, others may find different learning styles, like those offered by Odyssey, a more effective way of learning.

Courses offered range from the basics, like what are queries and resolvers, to the more advanced subjects, such as Apollo Federation.

Hasura

Tanmai from Hasura spoke next about updates done within Hasura. One of the biggest new features is support for cross-database joins over GraphQL. This update allows the developer to retrieve data from any number of data stores with efficient queries. The next thing being worked on now is end-to-end streaming.

PayPal

Joey Nenni of PayPal spoke about PayPal's experience with adopting GraphQL. He mentioned that once PayPal supported developers with tooling and sample apps, GraphQL spread like wildfire. Seeing the potential to do more with GraphQL, especially with sharing components, PayPal looked into Apollo Federation about 9 months ago, and as of about 2 weeks ago, they are now live with millions of requests already going through their gateway.

Joey also spoke about how GraphQL adoption is really about persistence. It's an iterative process. By making small steps, collecting small wins, and repeating that process, it becomes a lot easier to sell GraphQL. Joey coined the term "Guerilla Warfare" when it comes to finding successful implementations for GraphQL solutions.

GraphCMS

GraphCMS gives you instant GraphQL Content APIs to create, enrich, unify, and deliver your content across platforms.

GraphCMS recently hosted GraphQL Conf AND has recently raised $10 million in a Series A funding round. With all of this GraphQL focused momentum, GraphCMS is poising itself as a powerful solution for Headless CMS.

The ultimate content platform that enables you to deliver applications at scale.

Carlos Rufo

Defer and Stream

One important piece of information that Uri brought to the groups' attention was that defer, stream, live queries, and other features in spec proposals, but not in the actual spec, CAN BE USED SAFELY. Uri noticed a patter in production settings: once people have been given the option to use these new features, like defer, they see how valuable those features can be.

If you want to see more information involving these GraphQL directives, you can check out a blog post covering them here.

Apollo Federation

Implement a single graph across multiple services

Apollo Documentation

One very popular subject that is commonly brought up in Apollo conversations is Apollo Federation, and the idea of having a unified Graph connecting many services.

For PayPal, they spoke about the experiences encountered while transitioning some of their shared logic to a federated graph, while maintaining developer experience.

Apollo itself had a very positive experience using Apollo Federation. They ran into the need to unite two services, one written in Kotlin, and one in TypeScript, and have them run under a single gateway. This was a very big win and prevented the need for developers to learn additional languages to support a larger graph.

Tanmai had a balanced perspective on Apollo Federation:

Are we federating how the API comes together and presents itself? Or are we federating the execution itself?

He shared his experiences with analyzing where exactly a federated graph could be a good fit.

For Uri, he spoke about how the most important question is, "Are we actually making the product development faster?" Adopting Apollo Federation may give a different answer depending on the team and work being done.

Conclusion

GraphQL is still growing rapidly, and as shown in this State of GraphQL, there is a growing thriving community surrounding it. Continue the conversation, no matter your experience level, and check out the GraphQL Working Group. While this was a quick summary of the things spoken about during the State of GraphQL, you can catch the whole video on YouTube.

Thank you for enjoying the State of GraphQL!

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Matthew Pagan

@mastapegs @mastapegs

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? In this article, we will take a look at a few code examples that explore different solutions on how to resolve nested queries in Apollo Server. I have included all code examples in CodeSandbox if you are interested in trying them out on your own. Prerequisites This article assumes that you have a basic knowledge of GraphQL terminology. Table of Contents - How to resolve nested queries: An approach using resolvers and the filter method - A refactored approach using Data Loaders and Data Sources - What are Data Loaders - How to setup a Data Source - Setting up our schemas and resolvers - Resolving nested queries when microservices are involved - Conclusion How to resolve nested queries: An approach using resolvers and the filter method In this first example, we are going to be working with two data structures called musicBrands and musicAccessories. musicBrands is a collection of entities consisting of id and name. musicAccessories is a collection of entities consisting of the product name, price, id and an associated brandId. You can think of the brandId as a foreign key that connects the two database tables. We also need to set up the schemas for the brands and accessories. ` The next step is to set up a resolver for our Query to return all of the music accessories. ` When we run the following query and start the server, we will see this JSON output: ` ` As you can see, we are getting back the value of null for the brands field. This is because we haven't set up that relationship yet in the resolvers. Inside our resolver, we are going to create another query for the MusicAccessories and have the value for the brands key be a filtered array of results for each brand. ` When we run the query, this will be the final result: ` ` This single query makes it easy to access the data we need on the client side as compared to the REST API approach. If this were a REST API, then we would be dealing with multiple API calls and a Promise.all which could get a little messy. You can find the entire code in this CodeSandbox example. A refactored approach using Data Loaders and Data Sources Even though our first approach does solve the issue of resolving nested queries, we still have an issue fetching the same data repeatedly. Let’s look at this example query: ` If we take a look at the results, we are making additional queries for the brand each time we request the information. This leads to the N+1 problem in our current implementation. We can solve this issue by using Data Loaders and Data Sources. What are Data Loaders Data Loaders are used to batch and cache fetch requests. This allows us to fetch the same data and work with cached results, and reduce the number of API calls we have to make. To learn more about Data Loaders in GraphQL, please read this helpful article. How to setup a Data Source In this example, we will be using the following packages: - apollo-datasource - apollo-server-caching - dataloader We first need to create a BrandAccessoryDataSource class which will simulate the fetching of our data. ` We will then set up a constructor with a custom Dataloader. ` Right below our constructor, we will set up the context and cache. ` We then want to set up the error handling and cache keys for both the accessories and brands. To learn more about how caching works with GraphQL, please read through this article. ` Next, we are going to set up an asynchronous function called get which takes in an id. The goal of this function is to first check if there is anything in the cached results and if so return those cached results. Otherwise, we will set that data to the cache and return it. We will set the ttl(Time to Live in cache) value to 15 seconds. ` Below the get function, we will create another asynchronous function called getByBrand which takes in a brand. This function will have a similar setup to the get function but will filter out the data by brand. ` Setting up our schemas and resolvers The last part of this refactored example includes modifying the resolvers. We first need to add an accessory key to our Query schema. ` Inside the resolver, we will add the accessories key with a value for the function that returns the data source we created earlier. ` We also need to refactor our Brand resolver to include the data source we set up earlier. ` Lastly, we need to modify our ApolloServer object to include the BrandAccessoryDataSource. ` Here is the entire CodeSandbox example. When the server starts up, click on the Query your server button and run the following query: ` Resolving nested queries when microservices are involved Microservices is a type of architecture that will split up your software into smaller independent services. All of these smaller services can interact with a single API data layer. In this case, this data layer would be GraphQL. The client will interact directly with this data layer, and will consume API data from a single entry point. You would similarly resolve your nested queries as before because, at the end of the day, there are just functions. But now, this single API layer will reduce the number of requests made by the client because only the data layer will be called. This simplifies the data fetching experience on the client side. Conclusion In this article, we looked at a few code examples that explored different solutions on how to resolve nested queries in Apollo Server. The first approach involved creating custom resolvers and then using the filter method to filter out music accessories by brand. We then refactored that example to use a custom DataLoader and Data Source to fix the "N+1 problem". Lastly, we briefly touched on how to approach this solution if microservices were involved. If you want to get started with Apollo Server and build your own nested queries and resolvers using these patterns, check out our serverless-apollo-contentful starter kit!...

May 17, 2023

6 mins

GraphQL

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!...

Jun 2, 2023

7 mins

GraphQL

How to deploy a NodeJS application using Fly.io

I was astounded when I learned just how easy it is to deploy static web applications. Services like AWS Amplify, Netlify, GitHub Pages, etc, trivialize this process, allowing developers to focus less on deployment, and more on feature development. I was equally astounded when I learned that it can be *JUST AS EASY* to deploy a web service! There are many options out there: - Render - Heroku - Platform.sh - AWS Elastic Beanstalk This guide is going to be focused on a solution that I have found to be incredibly developer-friendly platform, Fly.io. What is Fly.io? > Deploy App Servers Close to Your Users > > Run your full-stack apps (and databases!) all over the world. No ops required. Fly.io claims to be able to run full-stack apps with no ops required. That's a bold statement. While I've committed to plenty of PR's, I haven't deployed a web service in a *while*. I was feeling the itch to deploy a service to play around with some different languages in the backend, so I was 100% in the market for a developer-friendly way to get this done, with quite literally no ops hopefully required. Fly.io App Deployment Speed-run The last time I personally deployed a brand new web service was months and months ago, on a DigitalOcean droplet. My usual go-to solution for web apps are static web apps, so I'm used to deploying static assets. Fly.io has a particular portion of their documentation which immediately drew my attention: their Speedrun section. Before deciding to write this blog, I figured, I'd at least try out their service, and if I enjoyed it, I'd write about it. Holy moly was I shocked just how *easy* Fly.io made deployment. After about 15 minutes from landing on their documentation, I was able to deploy a web service, complete with GitHub Actions CI/CD. And I didn't even need to touch a server! Here is how you can do the same. I created an incredibly terse ExpressJS app using TypeScript. 1. Install flyctl: The root URL for Fly.io has a one line command you can use to install flyctl, the command line tool which handles deployment for you. For detailed instructions though, check out this page. 2. Sign up / Log in: Sign up or Log in using the appropriate command, flyctl auth signup or flyctl auth login. 3. Run flyctl launch: This will prompt you to name your application, select a region to deploy to, and then deploy your app. This generates a fly.toml config file with the deployment configurations. In those three steps, you too can launch a sample express app. CI/CD Adding CI/CD is as simple as adding a single file to the repo, along with retrieving and adding an API token to the repo. Add the following to .github/workflows/main.yml ` Then run flyctl auth token to generate and print an API token, then add it to the repo as a new secret named FLY_API_TOKEN. That is all you need to continuously deploy your NodeJS application on every commit! Conclusion Using Fly.io honestly felt like cheating. I remember being super proud of myself when I first deployed a full LAMP stack application on a VPS. I also clearly remember the pain of troubleshooting things like SSH, CertBot and LetsEncrypt, Nginx, etc. Fly.io completely trivialized the entire process. I easily see myself using this going forward for all containerized applications since the service even includes the means for auto-scaling your apps and containers!!! If you are a developer and you are not shy of the command-line, I highly recommend checking out Fly.io and spending 15 minutes of your time, just deploying a service. You'll be shocked at just how quick and easy it can be to go from 0 to CI/CD in mere moments....

Dec 7, 2021

4 mins

NodeJS

Transforming Platform Engineering Through Chargeback Programs with Shuchi Mittal

Shuchi Mittal, the Head of Cloud enablement at Honeywell, discusses how she as a leader in platform engineering has been able to transform internal platform engineering teams at other organizations by providing teams with value-added services, and how they effectively managed costs. She talks about how to treat these teams as customers, and delivering services that meet the customer needs, but also charging them for their usage. By providing policy-compliant infrastructure and unique services tailored to their requirements, platform engineering teams can showcase their commitment to supporting the success of other teams within an organization. This approach not only fosters trust but also positions platform engineering as a strategic partner rather than just a service provider. By going beyond the basic infrastructure provisioning, the platform engineering team can offer services that help development and product teams streamline their processes and improve efficiency. Shuchi shares her work at Fiserv where she implemented a chargeback system to track usage and costs effectively, incentivizing better development practices. This not only helped in managing costs but also encouraged teams to optimize their resource utilization, leading to improved overall efficiency and more easily scalable systems. Her platform engineering team recognized the importance of effectively managing financial aspects to secure upfront investment for product development. By implementing a billing system based on gigabyte hours, they aligned costs with usage, enabling teams to have a clear understanding of their resource consumption. This approach not only provided transparency but also incentivized teams to adopt cost-effective practices. By strategically managing financial aspects, the platform engineering team gained the trust of stakeholders and secured the necessary resources to drive innovation and deliver value to the organization. Shuchi’s journey of platform engineering serves as a valuable example of how a team can transition from being a basic service provider to becoming an innovation partner within an organization. By building trust, offering value-added services, and strategically managing financial aspects, the platform engineering team successfully elevated their role and became a strategic enabler of innovation. Download this episode here....

Apr 16, 2024

2 mins

Engineering LeadershipSoftware Engineering

GraphQL Updates- October 2021

State of GraphQL

Sponsors

Hosts

Panelists

GraphQL Updates

The GraphQL Foundation

Apollo Odyssey

Hasura

PayPal

GraphCMS

Defer and Stream

Apollo Federation

Conclusion

Matthew Pagan

You might also like

How to Resolve Nested Queries in Apollo Server

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

How to deploy a NodeJS application using Fly.io

Transforming Platform Engineering Through Chargeback Programs with Shuchi Mittal

You might also like

How to Resolve Nested Queries in Apollo Server

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

How to deploy a NodeJS application using Fly.io

Transforming Platform Engineering Through Chargeback Programs with Shuchi Mittal