fix rendering

packages/gatsby-recipes/src/apply-plan.js

@@ -1,4 +1,4 @@
 const render = require(`./renderer`)
 
 module.exports = (context, cb) =>
-  render(context.recipe, cb, context.inputs, true, true)
+  render(context.recipe, cb, context.inputs, true, true, true)

packages/gatsby-recipes/src/graphql-server/server.js

@@ -36,8 +36,11 @@ let lastDone = 0
 
 const compareState = (oldState, newState) => {
   // isEqual doesn't handle values on objects in arrays 🤷‍♀️
-  const newDone = cleanedState.context.plan.filter(r => r.isDone).length
-  return !lodash.isEqual(cleanedState, lastState) || lastDone !== newDone
+  const newDone = newState.context.plan.filter(r => r.isDone).length
+  const comparison = !lodash.isEqual(newState, oldState) || lastDone !== newDone
+  lastDone = newDone
+
+  return comparison
 }
 
 const emitUpdate = state => {
@@ -50,7 +53,6 @@ const emitUpdate = state => {
     })
 
     lastState = cleanedState
-    lastDone = newDone
   }
 }
 
@@ -69,8 +71,8 @@ const startRecipe = ({ recipePath, projectRoot }) => {
     ).onTransition(state => {
       // Don't emit again unless there's a state change.
       console.log(`===onTransition`, {
-        event: state.event,
         state: state.value,
+        event: state.event.type,
       })
       if (state.changed) {
         console.log(`===state.changed`, {

packages/gatsby-recipes/src/recipe-machine/index.js

@@ -130,7 +130,6 @@ const recipeMachine = Machine(
               const result = await createPlan(context, cb)
               return result
             } catch (e) {
-              console.log(e)
               throw e
             }
           },

packages/gatsby-recipes/src/renderer/render.js

@@ -253,11 +253,27 @@ const render = (recipe, cb, inputs = {}, isApply, isStream, name) => {
   const renderResources = isDrained => {
     result = RecipesReconciler.render(recipeWithWrapper, plan, name)
 
-    // If there's still nothing on the queue and we've drained the queue, that means we're done.
-    if (isDrained && queue.length === 0) {
+    const resources = transformToPlan(result)
+
+    const isDone = () => {
+      // Mostly for validation stage that checks that there's no resources
+      // in the initial step — this done condition says no resources were found
+      // and there's no inflight resource work (resources will be empty until the
+      // first resource returns).
+      //
+      // We use "inFlightCache" because the queue doesn't immediately show up
+      // as having things in it.
+      if (resources.length === 0 && ![...inFlightCache.values()].some(a => a)) {
+        return true
+        // If there's still nothing on the queue and we've drained the queue, that means we're done.
+      } else if (isDrained && queue.length === 0) {
+        return true
+      }
+
+      return false
+    }
+    if (isDone()) {
       // Rerender with the resources and resolve the data from the cache.
-      result = RecipesReconciler.render(recipeWithWrapper, plan)
-      const resources = transformToPlan(result)
       emitter.emit(`done`, resources)
     }
   }
@@ -266,7 +282,7 @@ const render = (recipe, cb, inputs = {}, isApply, isStream, name) => {
     trailing: false,
   })
 
-  queue.on(`task_finish`, function(taskId, r, stats) {
+  queue.on(`task_finish`, function (taskId, r, stats) {
     throttledRenderResources()
 
     const resources = transformToPlan(result)
@@ -277,7 +293,9 @@ const render = (recipe, cb, inputs = {}, isApply, isStream, name) => {
     renderResources(true)
   })
 
-  renderResources()
+  // When there's no resources, renderResources finishes synchronously
+  // so wait for the next tick so the emitter listners can be setup first.
+  process.nextTick(() => renderResources())
 
   if (isStream) {
     return emitter