Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - Effortless Custom GraphQL with GraphQL Codegen

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p class="has-line-data" data-line-start="7" data-line-end="8">In this Hasty Treat, Scott and Wes talk about GraphQL tooling, and specifically a couple tools we use that will change your experience with GraphQL.</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "TECH_Domains__Sponsor_9" name="TECH_Domains__Sponsor_9"></a>.TECH Domains - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting <a href= "https://go.tech/syntaxistech">go.tech/syntaxistech</a> and using the coupon code “syntax5”.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="LogRocket__Sponsor_12" name= "LogRocket__Sponsor_12"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Show_Notes_15" name="Show_Notes_15"></a>Show Notes</h2> <p class="has-line-data" data-line-start="16" data-line-end="17"> 03:38 - What is it?</p> <ul> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href= "https://graphql-code-generator.com/">https://graphql-code-generator.com/</a></li> <li class="has-line-data" data-line-start="18" data-line-end="20"> Code generation for GraphQL APIs</li> </ul> <p class="has-line-data" data-line-start="20" data-line-end="21"> 04:34 - What can it do?</p> <ul> <li class="has-line-data" data-line-start="21" data-line-end="22"> Generate React hooks for any of the major player Apollo client (<a href="https://github.com/FormidableLabs/urql">urql</a>)</li> <li class="has-line-data" data-line-start="22" data-line-end="24"> Types for the full stack — resolvers, mutations</li> </ul> <p class="has-line-data" data-line-start="24" data-line-end="25"> 07:49 - How we use it</p> <ul> <li class="has-line-data" data-line-start="25" data-line-end="26"> Generate a schema file to keep client and server in sync in mono repo</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> Creates all React Hooks</li> <li class="has-line-data" data-line-start="27" data-line-end="29"> Generates all types for both resolvers, and anything client-side</li> </ul> <h2 class="code-line" data-line-start="29" data-line-end="30"> <a id="Links_29" name="Links_29"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="https://react-query.tanstack.com/">React Query</a></li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="https://www.apollographql.com/">Apollo</a></li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="https://www.typescriptlang.org/">Typescript</a></li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="https://www.cypress.io/">Cypress</a></li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href= "https://periqles.herokuapp.com/">https://periqles.herokuapp.com/</a></li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href="https://the-guild.dev/">https://the-guild.dev/</a></li> <li class="has-line-data" data-line-start="36" data-line-end="38"> <a href="https://swagger.io/">Swagger</a></li> </ul> <h2 class="code-line" data-line-start="38" data-line-end="39"> <a id="Tweet_us_your_tasty_treats_38" name= "Tweet_us_your_tasty_treats_38"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this Hasty Treat, Scott and Wes talk about GraphQL tooling, and specifically a couple tools we use that will change your experience with GraphQL.
.TECH Domains - Sponsor .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out.tech Domains. Syntax listeners can snap their.TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”.
 LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
 Show Notes 03:38 - What is it?
  https://graphql-code-generator.com/

 Code generation for GraphQL APIs
  04:34 - What can it do?
  Generate React hooks for any of the major player Apollo client (urql)
 Types for the full stack — resolvers, mutations
  07:49 - How we use it
  Generate a schema file to keep client and server in sync in mono repo
 Creates all React Hooks
 Generates all types for both resolvers, and anything client-side
  Links  React Query

 Apollo

 Typescript

 Cypress

 https://periqles.herokuapp.com/

 https://the-guild.dev/

 Swagger

  Tweet us your tasty treats!  Scott’s Instagram

 LevelUpTutorials Instagram

 Wes’ Instagram

 Wes’ Twitter

 Wes’ Facebook

 Scott’s Twitter

 Make sure to include @SyntaxFM in your tweets

Aplikace Youradio Talk

Hasty Treat - Effortless Custom GraphQL with GraphQL Codegen

Poslechněte si podcast