Skip to content

Commit

Permalink
Fix tutorial URL and tweak downloading a schema article (apollographq…
Browse files Browse the repository at this point in the history
  • Loading branch information
Stephen Barlow authored and TizianoCoroneo committed Feb 9, 2022
1 parent 1ba4f51 commit 98d26d7
Show file tree
Hide file tree
Showing 7 changed files with 165 additions and 163 deletions.
12 changes: 6 additions & 6 deletions docs/source/downloading-schema.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,21 @@
title: Downloading a schema
---

Apollo iOS requires a GraphQL schema file as input to the code generation process. A schema file is a JSON file that contains the results of an introspection query. Conventionally this file is called `schema.json`, and you store it next to the `.graphql` files in your target.
Apollo iOS requires a GraphQL schema file as input to its code generation process. You can provide your schema either as a JSON file (most commonly the result of an introspection query) or as a `.graphqls` file that uses GraphQL SDL syntax. Conventionally, this file is named `schema.json` or `schema.graphqls` (depending on its format), and you store it in the same folder as your project's `App`:

> 🚧 BETA ALERT 🚧 : Instead of writing the rest of this in Bash, try using our new [Swift Scripting Library](./swift-scripting), now in Beta! It supports downloading a schema and generating code.
<img class="screenshot" src="./screenshot/schema_location.jpg" alt="Location of schema file in project" width="250" />

You can use the [Apollo CLI](https://www.apollographql.com/docs/devtools/cli/) to download a GraphQL schema by sending an introspection query to the server.
> 📣 **Check it out:** Instead of writing the scripts below in Bash, try using our new [Swift Scripting Library](./swift-scripting), now in Beta! It supports downloading a schema and generating code.
If you've installed the CLI globally, you can use the following command to download your schema:
You can use the [Apollo CLI](https://www.apollographql.com/docs/devtools/cli/) to download a GraphQL schema by sending an introspection query to the server. If you've installed the CLI globally, you can use the following command to download your schema:

```sh
apollo schema:download --endpoint=http://localhost:8080/graphql schema.json
```

Note that if you're using the local version set up for codegen, you'll want to use the same method you're using in the [Add a code generation build step](/installation/#5-add-a-code-generation-build-step) instructions to access that specific CLI. For example, if you're using CocoaPods, you can set it up like this to download your schema:
Note that if you're using the local version set up for codegen, you should use the same method you're using in the [Add a code generation build step](/installation/#5-add-a-code-generation-build-step) instructions to access that specific CLI. For example, if you're using CocoaPods, you can set it up like this to download your schema:

```sh
```bash
SCRIPT_PATH="${PODS_ROOT}/Apollo/scripts"
cd "${SRCROOT}/${TARGET_NAME}"
"${SCRIPT_PATH}"/run-bundled-codegen.sh schema:download --endpoint=http://localhost:8080/graphql schema.json
Expand Down
146 changes: 74 additions & 72 deletions docs/source/initialization.md

Large diffs are not rendered by default.

Binary file added docs/source/screenshot/schema_location.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
42 changes: 21 additions & 21 deletions docs/source/tutorial/tutorial-execute-query.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,45 +2,45 @@
title: "3. Execute your first query"
---

The most common GraphQL operation is the **query**, which requests data from your graph in a structure that conforms to your server's schema. If you return to [the Sandbox](https://studio.apollographql.com/sandbox/explorer?endpoint=https%3A%2F%2Fapollo-fullstack-tutorial.herokuapp.com) for your server, you can see available queries in the Schema Reference tab you opened earlier.
The most common GraphQL operation is the **query**, which requests data from your graph in a structure that conforms to your server's schema. If you return to [the Sandbox](https://studio.apollographql.com/sandbox/explorer?endpoint=https%3A%2F%2Fapollo-fullstack-tutorial.herokuapp.com/graphql) for your server, you can see available queries in the Schema Reference tab you opened earlier.

Scroll down to the `launches` query to get details about it:

<img src="images/launches_detail.png" class="screenshot" alt="Detail about launches query"/>

Here, you see both the query term itself, the return type, and information about parameters that can be passed to the query. You can use this information to write a query you'll eventually add to your app.
Here, you see both the query term itself, the return type, and information about parameters that can be passed to the query. You can use this information to write a query you'll eventually add to your app.

To start working with this query in the Sandbox Explorer, select the "play" button to the right side of the information:
To start working with this query in the Sandbox Explorer, select the "play" button to the right side of the information:

<img src="images/open_in_explorer_launches.png" class="screenshot" alt="Open in Explorer"/>

This brings you back into Sandbox's Explorer tab with the sidebar on the left showing documentation for the query you've selected:

<img src="images/explorer_sandbox_open.png" class="screenshot" alt="Docs open in the left sidebar"/>

Notice the small button next to the `launches` icon. Click this button to add the query to the middle "operations" panel:
Notice the small button next to the `launches` icon. Click this button to add the query to the middle "operations" panel:

<img src="images/explorer_add_launches_query.png" class="screenshot" alt="Click the button to add this query"/>

When the query is added, it will look like this:
When the query is added, it will look like this:

<img src="images/explorer_initial_added_query.png" class="screenshot" alt="The query once it's been added to the Operations section"/>

Let's break down what you're seeing here:
Let's break down what you're seeing here:

- The type of the operation, `query`, followed by the name of the operation, currently `Query` (we'll make that more specific in a second), is the outermost set of brackets.
- The actual query being called is the next set of brackets in. Since the `arguments` for this query both have default values, they are not automatically added to the query for you.
- An error in the empty space between the brackets, which is where you'll put the list of information you want back from each launch.
- An error in the empty space between the brackets, which is where you'll put the list of information you want back from each launch.

The Apollo iOS SDK requires every query to have a name (even though this isn't required by the GraphQL spec). Since you're going to be creating more than one query, it's also a good idea to give this operation a specific name other than `Query`. Change the name of the operation to `LaunchList`:
The Apollo iOS SDK requires every query to have a name (even though this isn't required by the GraphQL spec). Since you're going to be creating more than one query, it's also a good idea to give this operation a specific name other than `Query`. Change the name of the operation to `LaunchList`:

<img src="images/explorer_launch_list_rename.png" class="screenshot" alt="Renaming the query"/>

Next, on the left hand side, you can select what fields you want back in the returned object. Start by clicking the button next to the `cursor` field. It will mark that field as selected, then insert it into your operations:
Next, on the left hand side, you can select what fields you want back in the returned object. Start by clicking the button next to the `cursor` field. It will mark that field as selected, then insert it into your operations:

<img src="images/explorer_check_cursor.png" class="screenshot" alt="After adding the cursor field."/>

This is probably the easiest way to add fields to your object, since it knows how everything is spelled and what type everything is.
This is probably the easiest way to add fields to your object, since it knows how everything is spelled and what type everything is.

However, you can also use auto-complete to help you with this. Add a newline below `cursor` in the Operations panel and start typing `ha`. An autocomplete box pops up and shows you options based on what's in the schema:

Expand All @@ -50,21 +50,21 @@ The Sandbox Explorer is a great tool for building and verifying queries so you d

As the schema indicates, the `launches` query returns a `LaunchConnection` object. This object includes a list of launches, along with fields related to pagination (`cursor` and `hasMore`). The query you've written so far indicates exactly which fields of this `LaunchConnection` object you want to be returned.

Run this query by pressing the "Submit Operation" button, which should now have the name of your query, `LaunchList`:
Run this query by pressing the "Submit Operation" button, which should now have the name of your query, `LaunchList`:

<img src="images/explorer_submit_operation.png" class="screenshot" alt="Submit the operation"/>

You'll quickly see the query returns results as a JSON object on the right-hand side of the page:
You'll quickly see the query returns results as a JSON object on the right-hand side of the page:

<img src="images/explorer_launch_list_initial_response.png" class="screenshot" alt="Query JSON in Sandbox Explorer"/>

This query executes successfully, but it doesn't include any information about the `launches`! That's because we didn't include the necessary field in the query.

Click the button next to the `launches` field at the bottom of the left column. It will add a set of braces for `launches` to the operations section, and then move the documentation to show information for the `Launch` type:
Click the button next to the `launches` field at the bottom of the left column. It will add a set of braces for `launches` to the operations section, and then move the documentation to show information for the `Launch` type:

<img src="images/explorer_launches_drill_in.png" class="screenshot" alt="Status after adding launches field"/>

The fields you add in this set of brackets will be fetched for every launch in the list. Click the buttons next to `id` and `site` properties to add those two fields. When you're done, your operation should look like this:
The fields you add in this set of brackets will be fetched for every launch in the list. Click the buttons next to `id` and `site` properties to add those two fields. When you're done, your operation should look like this:

```graphql:title=(Sandbox%20Explorer)
query LaunchList {
Expand All @@ -75,11 +75,11 @@ query LaunchList {
id
site
}
}
}
}
```

Run the operation again, and you'll now see that in addition to the information you got back before, you're also getting a list of launches with their ID and site information:
Run the operation again, and you'll now see that in addition to the information you got back before, you're also getting a list of launches with their ID and site information:

<img src="images/completed_id_query.png" class="screenshot" alt="Updated query JSON in Sandbox Explorer"/>

Expand All @@ -93,7 +93,7 @@ Now that your query is fetching the right data, head back to Xcode.

2. Click **Next** and name the file `LaunchList.graphql`. Make sure it's saved at the same level as your `schema.json` file. As previously, don't add it to any target.

3. Copy your final operation from Sandbox Explorer by selecting the three dot (aka "meatball") menu to the right of your operation name and selecting "Copy Operation":
3. Copy your final operation from Sandbox Explorer by selecting the three dot (aka "meatball") menu to the right of your operation name and selecting "Copy Operation":

<img src="images/explorer_meatball_copy.png" class="screenshot" alt="Copy operation from Explorer Sandbox"/>

Expand All @@ -113,9 +113,9 @@ You're now ready to generate code from the combination of your saved query and s

### The `API.swift` file

Open the `API.swift` file. It defines a root class, `LaunchListQuery`, with many nested structs below it. If you compare the structs to the JSON data returned in Sandbox Explorer, you see that the structure matches. These structs include properties only for the fields that your query requests.
Open the `API.swift` file. It defines a root class, `LaunchListQuery`, with many nested structs below it. If you compare the structs to the JSON data returned in Sandbox Explorer, you see that the structure matches. These structs include properties only for the fields that your query requests.

Try commenting out the `id` property in `LaunchList.graphql` using a `#`, saving, then building again. When the build completes, the innermost `Launch` now only includes the built-in `__typename` and the requested `site` property.
Try commenting out the `id` property in `LaunchList.graphql` using a `#`, saving, then building again. When the build completes, the innermost `Launch` now only includes the built-in `__typename` and the requested `site` property.

Uncomment `id` in `LaunchList.graphql` and rebuild to restore the property.

Expand All @@ -127,7 +127,7 @@ To use the generated operations in `API.swift`, you first create an instance of

1. Create a new Swift file called `Network.swift` and copy the code from [Basic client creation](/initialization/#basic-client-creation) into it. Make sure to add `import Apollo` to the top of the file.

2. Update the URL string to be `https://apollo-fullstack-tutorial.herokuapp.com` instead of the `localhost` URL in the example.
2. Update the URL string to be `https://apollo-fullstack-tutorial.herokuapp.com/graphql` instead of the `localhost` URL in the example.

3. To make sure your `ApolloClient` instance is communicating correctly with the server, add the following code to `AppDelegate.swift` in the `application:didFinishLaunchingWithOptions` method, above `return true`:

Expand All @@ -142,7 +142,7 @@ To use the generated operations in `API.swift`, you first create an instance of
}
```

Build and run your application. The web host might take a few seconds to spin up your GraphQL server if nobody's been using it recently, but once it's up, you should see a response that resembles the following:
Build and run your application. The web host might take a few seconds to spin up your GraphQL server if nobody's been using it recently, but once it's up, you should see a response that resembles the following:

<img alt="Success log output" class="screenshot" src="images/success_log_barf.png"/>

Expand Down
Loading

0 comments on commit 98d26d7

Please sign in to comment.