Apollo-Studio-Setup.md

Getting started with Apollo Studio

Create an Apollo Studio Account

You can sign up for Studio with either your GitHub identity or a username and password.

1. Go to studio.apollographql.com and click Let's get started.

2. Complete the signup flow, which includes:

3. Creating an organization that you can invite teammates to

4. Selecting a plan for your organization (the Free plan is always free, and the Team plan provides a free trial of paid features)

Integrate Existing Api

Note: The Apollo Docs suggest you import/link an existing schema. We have found that using the explorer to dynamically access this information is the easiest way to get started.

1. Click the Apollo Explorer Button on the top left of the screen.

2. On the top right of the screen is a sandbox url input, click the settings icon in this input.

3. Enter in the Cloudfront GraphQL API URL and click save

4. Click the headers tab on the bottom of the screen

5. Copy the generated id token from your Postman Environment and enter it into this header field.

6. Apollo Studio will use introspection to access the schema of your API. If it has worked you should see your schema on the left side of the screen.

7. Publish your schema by pressing the publish button to the right of the sandbox url input. Because this schema is connected to your DEV APi, using an appropriate naming convention.

Setup Automated Authentication in a Preflight Script

1. Once your graph is published , you will br automatically navigated to that graphs screen.

2. Click the Explorer navigation element.

3. There is a section Preflight script, click the add script button.

4. Add the following script:

var clientId = explorer.environment.get("cognitoClientId");
var username = explorer.environment.get("cognitoUserName");
var password = explorer.environment.get("cognitoUserPassword");
try {
       const response = await explorer.fetch("https://cognito-idp.us-east-1.amazonaws.com/", {
              method: 'POST',
              headers: {
                     'X-Amz-Target': 'AWSCognitoIdentityProviderService.InitiateAuth',
                     'Content-Type': 'application/x-amz-json-1.1'
              },
              body: JSON.stringify({
                     "AuthParameters": {
                            "USERNAME": username,
                            "PASSWORD": password
                     },
                     "AuthFlow": "USER_PASSWORD_AUTH",
                     "ClientId": clientId
              })
       });

       const body = JSON.parse(response.body);
       explorer.environment.set("cognitoClientId", clientId);
       explorer.environment.set("cognitoUserName", username);
       explorer.environment.set("cognitoUserPassword", password);
       explorer.environment.set("cognitoIdToken", body.AuthenticationResult.IdToken);
}
catch (err) {
       console.log('ERROR AUTHENTICATING', err);
       explorer.environment.set("cognitoClientId", clientId);
       explorer.environment.set("cognitoUserName", username);
       explorer.environment.set("cognitoUserPassword", password);
}

5. Add an env variables json in the Environment variables section with values from your Postman/Cognito environment

{
  "cognitoClientId": "6um99fv2qtb6f7ise3i037vna",
  "cognitoUserName": "mf-int-test@yopmail.com",
  "cognitoUserPassword": "PASSWORD"
}

6. Click the Preflight script on

7. Update the shared headers to reference the new id token variable.

Send Requests

Select queries from your schema and add graphql variables. Then send requests!

query auction_904_subsidy_awards_geojson ($counties: [String]!, $skipCache: Boolean) {
    auction_904_subsidy_awards_geojson (counties: $counties, skipCache: $skipCache) {
        type
        features {
            type
            id
            properties
            geometry {
                coordinates
                type
            }
        }
    }
}