<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Kyle Logue</title>
    <description>The latest articles on DEV Community by Kyle Logue (@kylelogue).</description>
    <link>https://dev.to/kylelogue</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3516869%2F98fc087e-0817-4f0d-87ef-327545624aeb.jpg</url>
      <title>DEV Community: Kyle Logue</title>
      <link>https://dev.to/kylelogue</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/kylelogue"/>
    <language>en</language>
    <item>
      <title>The 4-Day Wait: Why I'm Always Blocked Waiting for APIs</title>
      <dc:creator>Kyle Logue</dc:creator>
      <pubDate>Wed, 24 Sep 2025 12:00:00 +0000</pubDate>
      <link>https://dev.to/kylelogue/the-4-day-wait-why-im-always-blocked-waiting-for-apis-5gel</link>
      <guid>https://dev.to/kylelogue/the-4-day-wait-why-im-always-blocked-waiting-for-apis-5gel</guid>
      <description>&lt;p&gt;Okay, this happened to me again yesterday and I finally snapped.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;On a Monday...&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;PM:&lt;/strong&gt; "hey, we need a user profile page for the new dashboard"&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Me:&lt;/strong&gt; "Cool, what does the user API look like?"&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Backend dev:&lt;/strong&gt; "Oh, I need to build that first. Give me a few days."&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Me:&lt;/strong&gt; "..."&lt;/p&gt;

&lt;p&gt;So here I am on Wednesday, still waiting. Again. And I'm sitting here wondering - am I the only one who deals with this constantly?&lt;/p&gt;

&lt;h2&gt;
  
  
  This kept happening until I did something about it
&lt;/h2&gt;

&lt;p&gt;I started actually tracking this because it was driving me nuts. In the last few months:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Got blocked 8+ different times waiting for APIs&lt;/li&gt;
&lt;li&gt;Average wait: about 4 days each time
&lt;/li&gt;
&lt;li&gt;Half the time when the API is "ready," it's different than what we talked about&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Like last week - we agreed the user object would have &lt;code&gt;name&lt;/code&gt; and &lt;code&gt;email&lt;/code&gt;. API comes back with &lt;code&gt;full_name&lt;/code&gt; and &lt;code&gt;email_address&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Cool.&lt;/p&gt;

&lt;p&gt;And it's not like these are complex APIs! Most of them are just basic CRUD stuff. Get user, update user, delete user. But I still have to wait around twiddling my thumbs.&lt;/p&gt;

&lt;p&gt;I got so frustrated that I actually built a CLI tool to solve this. It's called SpecJet and it's free on npm. But honestly, I'm not sure if I just solved my own weird workflow problem or if this is actually useful for other developers.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I was doing (and I bet you do too)
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;The hopeful mock data approach:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Fingers crossed this matches what backend builds&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John Doe&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
  &lt;span class="na"&gt;email&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;john@example.com&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then backend delivers:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;user_id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;usr_123abc&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;display_name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John Doe&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;email_address&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;john@example.com&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;created_at&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;2024-01-15T10:30:00Z&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;preferences&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nl"&gt;theme&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;dark&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="c1"&gt;// oh, we have preferences now?&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Cue me spending half a day fixing everything 🙃&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The context switching nightmare:&lt;/strong&gt;&lt;br&gt;
"I guess I'll work on the settings page while I wait"&lt;br&gt;
&lt;em&gt;opens different branch&lt;/em&gt;&lt;br&gt;
"Oh wait, settings also needs a user preferences API"&lt;br&gt;
&lt;em&gt;sigh&lt;/em&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  What I built (and why I need your input)
&lt;/h2&gt;

&lt;p&gt;So I built this CLI tool that lets you:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Quickly design an &lt;a href="https://learn.openapis.org/specification/structure.html" rel="noopener noreferrer"&gt;OpenAPI&lt;/a&gt; contract (takes like 5 minutes)&lt;/li&gt;
&lt;li&gt;Generate TypeScript types immediately &lt;/li&gt;
&lt;li&gt;Start a mock server with realistic data&lt;/li&gt;
&lt;li&gt;Build your frontend feature right away&lt;/li&gt;
&lt;li&gt;When backend is ready, change one line and everything works&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;It looks like this:&lt;/p&gt;

&lt;p&gt;First, initialize the project:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-g&lt;/span&gt; specjet
specjet init user-api
&lt;span class="nb"&gt;cd &lt;/span&gt;user-api
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This creates an &lt;a href="https://learn.openapis.org/specification/structure.html" rel="noopener noreferrer"&gt;OpenAPI&lt;/a&gt; contract file like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="na"&gt;openapi&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;3.0.0&lt;/span&gt;
&lt;span class="na"&gt;info&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;title&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;User API&lt;/span&gt;
  &lt;span class="na"&gt;version&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;1.0.0&lt;/span&gt;
&lt;span class="na"&gt;paths&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="s"&gt;/users/{id}&lt;/span&gt;&lt;span class="err"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;get&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="na"&gt;parameters&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
        &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;id&lt;/span&gt;
          &lt;span class="na"&gt;in&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;path&lt;/span&gt;
          &lt;span class="na"&gt;required&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;
          &lt;span class="na"&gt;schema&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
            &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;string&lt;/span&gt;
      &lt;span class="na"&gt;responses&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
        &lt;span class="s1"&gt;'&lt;/span&gt;&lt;span class="s"&gt;200'&lt;/span&gt;&lt;span class="err"&gt;:&lt;/span&gt;
          &lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;User details&lt;/span&gt;
          &lt;span class="na"&gt;content&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
            &lt;span class="na"&gt;application/json&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
              &lt;span class="na"&gt;schema&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
                &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;object&lt;/span&gt;
                &lt;span class="na"&gt;properties&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
                  &lt;span class="na"&gt;user_id&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
                    &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;string&lt;/span&gt;
                  &lt;span class="na"&gt;display_name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
                    &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;string&lt;/span&gt;
                  &lt;span class="na"&gt;email_address&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
                    &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;string&lt;/span&gt;
                  &lt;span class="na"&gt;created_at&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
                    &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;string&lt;/span&gt;
                    &lt;span class="na"&gt;format&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;date-time&lt;/span&gt;
                  &lt;span class="na"&gt;preferences&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
                    &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;object&lt;/span&gt;
                    &lt;span class="na"&gt;properties&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
                      &lt;span class="na"&gt;theme&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
                        &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;string&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then run these commands:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;specjet generate  &lt;span class="c"&gt;# Creates TypeScript types&lt;/span&gt;
specjet mock      &lt;span class="c"&gt;# Realistic mock server running&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then you just build against the mock server like it's the real API. When the real API is ready, you change &lt;code&gt;localhost:3001&lt;/code&gt; to &lt;code&gt;api.myapp.com&lt;/code&gt; and everything works.&lt;/p&gt;

&lt;h2&gt;
  
  
  But here's my question...
&lt;/h2&gt;

&lt;p&gt;Is this just me being weird about workflows, or do other frontend developers actually experience this "4-day wait" pattern?&lt;/p&gt;

&lt;p&gt;Because if it's just me, then I built a tool to solve my personal quirks. But if this is a real problem that lots of teams have, then maybe this approach actually helps.&lt;/p&gt;

&lt;p&gt;I've been using it for my own projects and it eliminates the waiting entirely. But I'm one person with one workflow.&lt;/p&gt;

&lt;h2&gt;
  
  
  What's your experience?
&lt;/h2&gt;

&lt;p&gt;Seriously though - am I the only one frustrated by this? Do you:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Get blocked waiting for APIs regularly?&lt;/li&gt;
&lt;li&gt;Mock your own data and hope it matches?&lt;/li&gt;
&lt;li&gt;Have better strategies I'm missing?&lt;/li&gt;
&lt;li&gt;Think a CLI approach would actually help your workflow?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And if you're curious about the tool, it's &lt;a href="//github.com/specjet-api/specjet"&gt;here&lt;/a&gt; or you can just &lt;code&gt;npm install -g specjet&lt;/code&gt;. I'd genuinely love feedback on whether this solves a real problem or if I'm just solving my own weird issues.&lt;/p&gt;

&lt;p&gt;The tool exists, but the real question is whether it matters to anyone besides me.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>frontend</category>
      <category>javascript</category>
      <category>openapi</category>
    </item>
  </channel>
</rss>
