diff --git a/packages/docs/src/guide-composable/README.md b/packages/docs/src/guide-composable/README.md
index b7bd0ca..a715f6d 100644
--- a/packages/docs/src/guide-composable/README.md
+++ b/packages/docs/src/guide-composable/README.md
@@ -1,6 +1,6 @@
# Introduction
-The Composition API is an API allowing writing data and logic in an easily composable way inside the `setup` option.
+The Composition API is an API where you write data and logic in an easily composable way inside the `setup` option.
If you are using Typescript, it is strongly recommended to start using the Composition API as its typing capabilities are unmatched by any other Vue API.
diff --git a/packages/docs/src/guide-composable/mutation.md b/packages/docs/src/guide-composable/mutation.md
index 0ec60fc..80e3c8f 100644
--- a/packages/docs/src/guide-composable/mutation.md
+++ b/packages/docs/src/guide-composable/mutation.md
@@ -4,7 +4,7 @@ Now that's we've learned [how to fetch data](./query), the next logical step is
## Executing a mutation
-The `useMutation` composition function is the main way of setting up mutation in Vue components.
+The `useMutation` composition function is the main way of setting up mutations in Vue components.
Start by importing it in your component:
diff --git a/packages/docs/src/guide-composable/query.md b/packages/docs/src/guide-composable/query.md
index 66720af..2c172cb 100644
--- a/packages/docs/src/guide-composable/query.md
+++ b/packages/docs/src/guide-composable/query.md
@@ -1,10 +1,12 @@
# Queries
-Fetching data involves executing **queries** using standard GraphQL documents. You can learn more about queries and GraphQL documents [here](https://graphql.org/learn/queries/) and [practice running queries in the playground](https://www.apollographql.com/docs/react/development-testing/developer-tooling/#features).
+Fetching data involves executing **query** operations using standard GraphQL documents. You can learn more about queries and GraphQL documents [here](https://graphql.org/learn/queries/) and [practice running queries in the playground](https://www.apollographql.com/docs/react/development-testing/developer-tooling/#features).
## Executing a query
-Let's take this GraphQL document to execute our query:
+### GraphQL document
+
+Let's take this example GraphQL document throughout this section:
```graphql
query getUsers {
@@ -18,9 +20,71 @@ query getUsers {
```
::: tip
-It's recommended to give a name to your GraphQL operations (here `getUsers`), so it's easier to find them in the Apollo Client devtools.
+It is recommended to give a name to your GraphQL operations (here `getUsers`), so it is easier to find them in the Apollo Client devtools.
:::
+This query would return a `data` object with an array of `users` with their `id`, `firstname`, `lastname` and `email`. It could look like this:
+
+```json
+{
+ "data": {
+ "users": [
+ {
+ "id": "abc",
+ "firstname": "James",
+ "lastname": "Holden",
+ "email": "james.holden@roci.com"
+ },
+ {
+ "id": "def",
+ "firstname": "Naomi",
+ "lastname": "Nagata",
+ "email": "naomi.nagata@roci.com"
+ }
+ ]
+ }
+}
+```
+
+You may ask: why is there a nested `users` property on `data`? Why isn't the array directly on `data`?
+
+This is because you can select multiple root fields in a GraphQL operation:
+
+```graphql
+query getCatsAndDogs {
+ cats {
+ id
+ }
+
+ dogs {
+ id
+ }
+}
+```
+
+In this case, the result could look like this:
+
+```json
+{
+ "data": {
+ "cats": [
+ { "id": "abc" },
+ { "id": "def" }
+ ],
+ "dogs": [
+ { "id": "ghi" },
+ { "id": "jkl" }
+ ]
+ }
+}
+```
+
+There can also be other optional properties on the result alongside `data`:
+- `errors` : an array of errors returned by the server
+- `extensions` : additional informations such as execution timings
+
+### useQuery
+
The main composition function used to execute queries is `useQuery`. In your component, start by importing it:
```vue
@@ -35,7 +99,7 @@ export default {
```
-You can use `useQuery` in your `setup` option by passing it a GraphQL document as the first parameter and retrieve the query `result`:
+You can use `useQuery` in your `setup` option and pass it a GraphQL document as the first parameter. Then retrieve the query `result`:
```vue{3,7-16}
```
-Note that `result` here is a `Ref` holding the data from the result object retrieved from Apollo.
+Note that `result` here is a `Ref` holding the data from the result returned by Apollo.
If you want to directly access the data object, use `result.value`:
@@ -90,7 +154,7 @@ export default {
```
-In this case, you can also watch the `Ref` directly:
+In this example, you could also watch the `Ref` directly:
```vue{19-20}