More updates to Getting Started guide

site/src/routes/guides/contributing.svx

@@ -107,7 +107,7 @@ To understand how this works, consider this query:
 <script>
 	import { query, graphql } from '$houdini'
 
-	const { data } = query(graphql`
+	const SpeciesInfo = graphql`
 		query SpeciesInfo {
 			species(id: 1) {
 				name
@@ -121,7 +121,7 @@ To understand how this works, consider this query:
 </script>
 
 <div>
-	{$data.species.name}
+	{$info.data.species.name}
 </div>
 ```
 
@@ -134,9 +134,8 @@ file into these two:
 	// the store gets passed to us as a prop
 	export let data
 
+   let { SpeciesInfo } = data
 	$: ({ SpeciesInfo } = data)
-
-	const { data } = query($SpeciesInfo)
 </script>
 ```
 

site/src/routes/guides/faq.svx

@@ -49,7 +49,7 @@ Consider this query:
 </script>
 
 <div>
-	{$data.species.name}
+	{$data.info..species.name}
 </div>
 ```
 

site/src/routes/intro/fetching-data.svx

@@ -199,7 +199,7 @@ Once that's done, you should be able to navigate to `/6` to see Charizard's info
 
 Note: the name of the function that returns the values for a query's variables must follow a very specific format. It must be called `{QueryName}Variables`. If you look at the query we are working with, you'll see its named `SpeciesInfo` which is why this function is named `SpeciesInfoVariables`.
 
-For completeness, let's quickly add some buttons to navigate between the different species. Copy and paste this block of code as the last child of the `Container` component:
+For completeness, let's quickly add some buttons to navigate between the different species. Copy and paste this block of code as the last child of the `Container` component. Don't worry if you see an error when you click on them, we'll fix that next.
 
 ```svelte
 <Panel slot="right">
@@ -214,6 +214,20 @@ For completeness, let's quickly add some buttons to navigate between the differe
 </Panel>
 ```
 
+## Loading State
+
+If you've already clicked on those links you probably saw a scary message about accessing a value on `null`. The reason for this is because we haven't done anything
+to handle the loading state for our view. Let's just do something quick and dirty:
+
+```svelte
+
+{#if $info.isFetching}
+	<Container/>
+{:else}
+	<!-- what we had before -->
+{/if}
+```
+
 ## Error Handling
 
 So far so good! There is one slight problem: there are only 151 species in the first generation of Pokémon. The buttons we added in the last section prevent the user from going beyond those bounds, but if we navigate to `/152` directly we will get an error since `$info.data.species` is null. Go ahead, give it a try.

site/src/routes/intro/fragments.svx

@@ -146,7 +146,7 @@ Before we add anything to our route, let's update the component defined in `src/
 	export let species
 	export let number
 
-	const preview = fragment(species, graphql`
+	$: preview = fragment(species, graphql`
 		fragment SpeciesPreview on Species {
 			name
 			id

site/src/routes/intro/mutations.svx

@@ -61,7 +61,7 @@ Once you've added the field, add an import for `Icon` from the component directo
     <Icon
         name="star"
         id="favorite-star"
-        fill={$data.species.favorite ? "gold" :"lightgrey"}
+        fill={$info.data.species.favorite ? "gold" :"lightgrey"}
     />
 </button>
 ```
@@ -88,7 +88,7 @@ With that in place we can now define a function that will invoke the `toggleFavo
 A mutation store provides a `mutate` method to trigger your mutation. It takes an object with fields to match the mutation's input and returns a promise that will resolve with the response from the mutation. With that in place, we can now configure the button we added earlier to call this function:
 
 ```svelte
-<button on:click={() => toggleFavorite.mutate({id: $data.species.id})}>
+<button on:click={() => toggleFavorite.mutate({id: $info.data.species.id})}>
 ```
 
 Now, try clicking on the grey star for any species. It should flip between gold and grey every time you click it.