Continue with the Apollo introduction guide (4) : Writing a change parser.

Understand basic development tools.

Apollo Starter – Directory:

  1. introduce
  2. Build the schema
  3. Connect to data source
  4. Write a query parser
  5. Write a change parser
  6. Connect the Apollo Studio
  7. Create Apollo client
  8. Obtain data by querying
  9. Modify data through changes
  10. Managing Local Status

Time to finish: 10 minutes

Well done! We have a GraphQL service running that can interact with data from multiple sources. Before moving to the client side, learn some powerful tools.

Apollo Studio is a cloud platform that helps with prototyping, deployment to monitor every stage of GraphQL development.

The core features of Studio are completely free. All features in this tutorial are free features.

Create an Apollo account

Skip this step if you have already created an account for Apollo Studio Explorer.

Go to studio.apollographql.com and click Create an Account. You can register with your GitHub account or set your own username and password.

After registering, you will be redirected to the Apollo Studio home page.

Create the first diagram

In Apollo Studio, each graph ** is a different data graph with a corresponding GraphQL Schema. For your first diagram, use the schema of the service you just built.

  1. On the Studio home page, click The New Graph in the upper right corner.
  2. Give your graph a name, and click Next.
  3. A dialog box appears, prompting you to register the schema. You will do this in the next step.

Connection service

Apollo services can communicate directly with Apollo Studio to register their schemas and push useful performance metrics. The Graph API key is required for this communication. Let’s get one for Graph.

On the Studio home page, click the graph you just created. The same dialog will be displayed as when it was created:

Copy your graph API key, which is the value that appears after APOLLO_KEY= in the first block (starting with service:).

The API key can be provided to the Apollo service by setting the API key to the APOLLO_KEY environment variable value. The sample application has used the Dotenv package to easily read environment variables from.env files.

By copying the start/server /. Env. Example, created in the start/server. The env file. Then paste your API key into it as follows and add a line APOLLO_SCHEMA_REPORTING=true:

APOLLO_KEY=PASTE_YOUR_KEY_HERE
APOLLO_SCHEMA_REPORTING=true
Copy the code

**Graph API keys are private credentials. ** Never share it outside your organization or commit it to version control. Delete and replace any API keys that may have been compromised in a timely manner.

Start the service using NPM start and return to the Studio home page. After a few seconds, click graph to open its full details.

Try out the free Studio features

Connecting a service to Apollo Studio opens up all sorts of powerful features:

Explorer

As shown in the previous sections, Apollo Studio Explorer provides a comprehensive view of the Schema, including all the docstrings contained within it. Use it to build queries and execute them on the service.

Schema history

Open the ** History ** TAB to view the complete revision History of schema versions pushed by the service over time:

History helps you pinpoint when a particular type or field was added or removed, which is crucial in diagnosing problems.

Operating indicators

Apollo Server pushes metrics data to Studio for each GraphQL operation it performs. This data includes the time and detailed error information for resolving each field in the operation.

Apollo Server does not push the results of GraphQL operations to Studio. For more information, see Data Privacy and Compliance.

Open the Operations TAB to view the performance data of tracing service Operations in the last 24 hours:

Organizations with paid Studio can view metrics for the last 90 days or more, depending on the organization’s plan. For more information about paid Studio features, see the Studio documentation.

Now that our service is connected to Studio, it’s time to build the client that will perform the query!

Front-end notepad, not regularly updated, welcome to pay attention to!

  • Wechat official account: Lin Jingyi’s notepad
  • Blog: Lin Jingyi’s notebook
  • Nuggets column: Lin Jingyi’s notebook
  • Zhihu column: Lin Jingyi’s notebook
  • Github: MageeLin