GraphQL

State Of GraphQL Wrap-up

Feb 8, 2022

2 min read

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?

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.

Tyrel Chambers

Software Engineer passionate about developing cool ideas and pizza

@imtyrelchambers @tyrelchambers

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

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

GraphQL

JavaScript Marathon: Building Your Own Style Framework With Vanilla Extract

Writing custom CSS throughout your app is time-consuming and error-prone. Relying on Tailwind or similar frameworks locks you into their way of doing things. But with Vanilla Extract, you can pursue the happy medium path: write type-safe CSS, create your own utility classes, and compile everything down to static CSS files at build time. Tom walked us through how to setup and use Vanilla Extract to create themeable CSS architecture in our example app. Helpful links - GitHub repo: https://github.com/tvanantwerp/vanilla-extract-javascript-marathon/tree/empty-for-live-code - Youtube video: https://www.youtube.com/watch?v=LxUVASrxxu4 To learn more about Vanilla Extract, head over to their docs for a more detailed look into what working with Vanilla Extract is like. With Vanilla Extract, we don't need to run any CLI commands like other processors. We create the appropriate *.css.ts files which get evaluated at build-time, and turned into properly scoped class names. One thing to point out is our example is uses Vite. Don't forget to look at the config file we've modified that will look slightly different than the basic one created by the Vite CLI. Install the dependencies You can also reference the complete setup docs. > npm install @vanilla-extract/css @vanilla-extract/webpack-plugin Create our folder structure Let's get started by creating our folder structure that will hold our theme definitions. In the end, your folder structure is entirely up to you, but for the sake of this example, we will create a theme folder and within that we will add theme.css.ts. In this file, we will describe our different themes. We also have a sprinkles folder which is where we define our "utility classes" of sorts. It operates in a similar way to how TailwindCSS operates. These sprinkles are styles we can include in other parts of our code. We can see in our sprinkles file how we have defined certain custom styles. And if we head over to our button.css.ts, we can see where and how our custom styles are used. It's like creating style variables within our CSS so we can keep a relatively consistent design feel across our app. Our defined CSS styles will return classes with our properties defined. This is an example class from our Button/index.tsx: className={buttonStyle[color]}. This is a simple way to add different variants and styles to our components without bloating the component itself. For the sake of covering all our bases, we also defined a few global styles. Wrap-up Have a look at the example repo for a detailed look at how to use Vanilla Extract in a more in-depth way. We hope this has helped you understand how Vanilla Extract is used at a higher level, and how you can leverage it to create your own type-safe CSS styles....

Apr 6, 2022

3 mins

CSS

How to Go from Software Engineer to AI Engineer with Shawn Wang

Shawn Wang discusses AI engineering’s potential impact on the software development labor market and developer experience. With the rise of artificial intelligence technologies, there is an increasing demand for professionals who can bridge the gap between AI and software engineering, and engineers are looking around for guidance on how to best learn AI. Shawn emphasizes the importance of acquiring core knowledge and skills in AI engineering, highlighting the need for a systematic approach to education and development. He envisions a future where AI engineering becomes a recognized profession, with specialized training programs and certifications. He further talks about mental models for approaching AI literacy, and skill building. Shawn also discusses the use of advanced AI technology in software development. He showcases tools like GPT Vision, which can automate tasks and generate code efficiently. While acknowledging the potential of AI in enhancing productivity, Shawn emphasizes the need to leverage AI tools to augment human capabilities rather than replace them. Download this episode here....

Apr 17, 2024

1 min

Artificial IntelligenceEngineering Leadership

State Of GraphQL Wrap-up

🗣 Hosts

🗣 Panelists

Key Points

Tyrel Chambers

You might also like

How to Resolve Nested Queries in Apollo Server

Class and Enum Typings for Handling Data with GraphQL

JavaScript Marathon: Building Your Own Style Framework With Vanilla Extract

How to Go from Software Engineer to AI Engineer with Shawn Wang

You might also like

How to Resolve Nested Queries in Apollo Server

Class and Enum Typings for Handling Data with GraphQL

JavaScript Marathon: Building Your Own Style Framework With Vanilla Extract

How to Go from Software Engineer to AI Engineer with Shawn Wang