Docs
Launch GraphOS Studio
You're viewing documentation for a previous version of this software. Switch to the latest stable version.

Developer tools

Improve your developer experience with these these services and extensions


Apollo Graph Manager

Apollo Graph Manager is a cloud service that helps you manage, validate, and secure your organization's data .

It provides the following features to all Apollo users for free:

  • A registry that tracks changes and s
  • A schema explorer that makes it easy to inspect your schema's queries, , and other object definitions
  • Team collaboration via organizations

Advanced features are available with a to an Apollo Team or .

To learn more about Manager, check out the overview.

Apollo Client Devtools

The Devtools are available as extension for Chrome and Firefox.

Features

The devtools appear as an "Apollo" tab in your Chrome inspector, along side the "Elements" and "Console" tabs. There are currently 3 main features of the devtools:

  • : Send queries to your server through the Apollo network interface, or the Apollo cache to see what data is loaded.
  • Normalized store inspector: Visualize your store the way sees it, and search by names or values.
  • Watched inspector: View active queries and , and locate the associated UI components.

GraphiQL Console

Make requests against either your app’s or the cache through the Chrome developer console. This version of GraphiQL leverages your app’s network interface, so there’s no configuration necessary — it automatically passes along the proper HTTP headers, etc. the same way your Apollo Client app does.

Store Inspector

View the state of your client-side cache as a tree and inspect every object inside. Visualize the mental model of the Apollo cache. Search for specific keys and values in the store and see the path to those keys highlighted.

Watched Query Inspector

View the queries being actively watched on any given page. See when they're loading, what they're using, and, if you’re using React, which React component they’re attached to. Angular support coming soon.

Installation

You can install the extension via the Chrome Webstore. If you want to install a local version of the extension instead, skip ahead to the Developing section.

Configuration

While your app is in dev mode, the devtools will appear as an "Apollo" tab in your chrome inspector. To enable the devtools in your app even in production, pass connectToDevTools: true to the ApolloClient constructor in your app. Pass connectToDevTools: false if want to manually disable this functionality.

The "Apollo" tab will appear in the Chrome console if a global window.__APOLLO_CLIENT__ object exists in your app. adds this hook to the window automatically unless process.env.NODE_ENV === 'production'. If you would like to use the devtools in production, just manually attach your instance to window.__APOLLO_CLIENT__ or pass connectToDevTools: true to the constructor.

Find more information about contributing and debugging on the Apollo Client DevTools GitHub page.

Apollo Codegen

Apollo Codegen is a tool to generate API code or type annotations based on a and .

It currently generates Swift code, TypeScript annotations, Flow annotations, and Scala code, we hope to add support for other targets in the future.

See Apollo iOS for details on the mapping from results to Swift types, as well as runtime support for executing queries and . For Scala, see React Apollo Scala.js for details on how to use generated Scala code in a Scala.js app with .

Usage

If you want to use apollo-codegen, you can install it command globally:

npm install -g apollo-codegen

introspect-schema

The purpose of this command is to create a JSON dump file for a given . The input schema can be fetched from a remote or from a local file. The resulting JSON introspection dump file is needed as input to the generate command.

To download a by sending an to a server:

apollo-codegen introspect-schema http://localhost:8080/graphql --output schema.json

You can use the header option to add additional HTTP headers to the request. For example, to include an authentication token, use --header "Authorization: Bearer <token>".

You can use the insecure option to ignore any SSL errors (for example if the server is running with self-signed certificate).

To generate a JSON from a local GraphQL schema:

apollo-codegen introspect-schema schema.graphql --output schema.json

generate

The purpose of this command is to generate types for and made against the schema (it will not generate types for the schema itself).

This tool will generate Swift code by default from a set of definitions in .graphql files:

apollo-codegen generate **/*.graphql --schema schema.json --output API.swift

You can also generate type annotations for TypeScript, Flow, or Scala using the --target option:

# TypeScript
apollo-codegen generate **/*.graphql --schema schema.json --target typescript --output operation-result-types.ts
# Flow
apollo-codegen generate **/*.graphql --schema schema.json --target flow --output operation-result-types.flow.js
# Scala
apollo-codegen generate **/*.graphql --schema schema.json --target scala --output operation-result-types.scala

gql template support

If the source file for generation is a javascript or typescript file, the codegen will try to extrapolate the queries inside the gql tag templates.

The tag name is configurable using the CLI --tag-name option.

.graphqlconfig support

Instead of using the --schema option to point out your , you can specify it in a .graphqlconfig file.

In case you specify multiple schemas in your .graphqlconfig file, choose which one to pick by using the --project-name option.

Typescript and Flow

When using apollo-codegen with Typescript or Flow, make sure to add the __typename to every selection set within your .

If you're using a client like apollo-client that does this automatically for your , pass in the --addTypename option to apollo-codegen to make sure the generated Typescript and Flow types have the __typename as well. This is required to ensure proper type generation support for GraphQLUnionType and GraphQLInterfaceType .

Why is the __typename field required?

Using the type information from the , we can infer the possible types for . However, in the case of a GraphQLUnionType or GraphQLInterfaceType, there are multiple types that are possible for that . This is best modeled using a disjoint union with the __typename as the discriminant.

For example, given a schema:

interface Character {
name: String!
}
type Human implements Character {
homePlanet: String
}
type Droid implements Character {
primaryFunction: String
}

Whenever a of type Character is encountered, it could be either a Human or Droid. Human and Droid objects will have a different set of . Within your application code, when interacting with a Character you'll want to make sure to handle both of these cases.

Given this :

query Characters {
characters(episode: NEW_HOPE) {
name
... on Human {
homePlanet
}
... on Droid {
primaryFunction
}
}
}

Apollo Codegen will generate a union type for Character.

export type CharactersQuery = {
characters: Array<{
__typename: 'Human',
name: string,
homePlanet: ?string
} | {
__typename: 'Droid',
name: string,
primaryFunction: ?string
}>
}

This type can then be used as follows to ensure that all possible types are handled:

function CharacterFigures({ characters }: CharactersQuery) {
return characters.map(character => {
switch(character.__typename) {
case "Human":
return <HumanFigure homePlanet={character.homePlanet} name={character.name} />
case "Droid":
return <DroidFigure primaryFunction={character.primaryFunction} name={character.name} />
}
});
}
Previous
Mocking new schema capabilities
Next
Improving performance
Edit on GitHubEditForumsDiscord

© 2024 Apollo Graph Inc.

Privacy Policy

Company