diff --git a/docs/guides/apollo-studio.md b/docs/guides/apollo-studio.md index 7f77b7681e..6bd1290c7d 100644 --- a/docs/guides/apollo-studio.md +++ b/docs/guides/apollo-studio.md @@ -23,7 +23,15 @@ Before you configure `tailcall`, you will need to create a `Monolith` graph on A ![insert-gql-schema.png](../../static/images/apollo-studio/insert-gql-schema.png) - Copy the fields `APOLLO_KEY` and `APOLLO_GRAPH_REF` as they are required by `tailcall` to be able to send the usage metrics. -- Navigate to `Local Schema` and insert your schema generated by `tailcall` and click `Upload`.
_Note: you can get the schema by running `tailcall check --schema `_(click [here](./cli.md) to know more). +- There are two ways to let Apollo know about your GraphQL schema: + + - Navigate to `Local Introspection`. If you have a deployed instance of your GraphQL server you can put the URL pointing to that in `Endpoint URL`. If not, start a local instance of `tailcall` and put the local url here, similar to how is shown in the image below.
+ _Note: You can start a local instance of tailcall by running `tailcall start `(click [here](./cli.md) to know more)._ + + ![local-introspection.png](../../static/images/apollo-studio/local-introspection.png) + + - Or, Navigate to `Local Schema` and insert your schema generated by `tailcall` and click `Upload`.
+ _Note: you can get the schema by running `tailcall check --schema `_(click [here](./cli.md) to know more). ![local-schema.png](../../static/images/apollo-studio/local-schema.png) @@ -31,10 +39,41 @@ You have now successfully created a Monolith graph in Apollo Studio. The next st ## Check the metrics in Apollo Studio -To see the metrics for you queries follow these instructions: +To see the metrics for your queries follow these instructions: + +- Start `tailcall` with the appropriate configuration for Apollo. Below is an example of what a config may look like. + +```graphql +schema + @server(port: 8000, graphiql: true, hostname: "0.0.0.0") + @upstream(baseURL: "http://jsonplaceholder.typicode.com") + @telemetry( + export: { + apollo: { + # Make sure you set the appropriate values for APOLLO_API_KEY and APOLLO_GRAPH_REF + # in the ENV, as was acquired from the Apollo Studio website. + api_key: "{{env.APOLLO_API_KEY}}" + graph_ref: "{{env.APOLLO_GRAPH_REF}}" + } + } + ) { + query: Query +} + +type Query { + posts: [Post] @http(path: "/posts") +} + +type Post { + id: Int! + userId: Int! + title: String! + body: String! +} +``` -- Start `tailcall` with the appropriate configuration for Apollo. -- Create a query like below and run it multiple times to send it to Apollo Studio. +- Visit `http://localhost:8000/graphql` and create a query with an appropriate name (below is an example query named `MyQuery`) and run it multiple times to send the metrics to Apollo Studio.
+ _Note: Naming the query is not required to be able to send the metrics, but it helps to organize the metrics with appropriate names when viewed in Apollo Studio._ ```graphql query MyQuery { diff --git a/static/images/apollo-studio/local-introspection.png b/static/images/apollo-studio/local-introspection.png new file mode 100644 index 0000000000..a9001b794a Binary files /dev/null and b/static/images/apollo-studio/local-introspection.png differ