Developer Insights
Join millions of viewers! Our engineers craft human-written articles solving real-world problems weekly. Enjoy fresh technical content and numerous interviews featuring modern web advancements with industry leaders and open-source authors.
How to Leverage Apollo Client Fetch Policies Like the Pros
Apollo Client provides a rich ecosystem and cache for interfacing with your GraphQL APIs. You write your query and leverage the useQuery hook to fetch your data....
May 17, 2024
7 mins
How to create and use custom GraphQL Scalars
Enter the world of custom GraphQL scalars. These data types go beyond the conventional, offering the power and flexibility to tailor your schema to precisely match your application's unique needs....
Apr 10, 2024
5 mins
Efficiently Extract Object References in Shopify Storefront GraphQL API
Dive into the intricacies of Shopify's Storefront API with our blog post, 'Efficiently Extract Object References in Shopify Storefront GraphQL API'. Discover a hands-on guide to extracting complex data types, like images, from metafields and metaobjects....
Mar 29, 2024
4 mins
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....
Nov 8, 2023
4 mins
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
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....
May 26, 2023
2 mins
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?...
May 17, 2023
6 mins
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!...
May 15, 2023
3 mins
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....
Feb 20, 2023
3 mins
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....
Jan 17, 2023
5 mins
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....
May 23, 2022
5 mins
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?...
Feb 8, 2022
2 mins
Let's innovate together!
We're ready to be your trusted technical partners in your digital innovation journey.
Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.