Apollo Client helps you structure code in an economical, predictable, and declarative way that's consistent with modern development practices
superplate comes with optional Apollo GraphQL feature plugin. In this example, we'll demonstrate using Apollo GraphQL with SpaceX-API.
We'll define the shape of the query we'll use to fetch
launchesPast from SpaceX-API.
We'll use Apollo Client's
useQuery hook to execute our
GET_LAUNCHES query and obtains data, loading, and error properties from the result within the component. Depending on the state of those properties, we render a launch, a loading indicator, or an error message.
Since we are using TypeScript in the project, also import the necessary types that are generated from SpaceX-API schema definitions:
To generate the types automatically we set API service endpoint to apollo config file.
Then run the following command which defined in package.json.
Running this command will download a schema from Apollo or a GraphQL endpoint in JSON and generate static types into
__generated__ folder in project root directory automatically.
All this work will be handled automatically by CLI, so you don’t need to do anything extra as long as you choose Apollo GraphQL feature plugin during the project creation phase.
Apollo GraphQL plugin currently exludes
tsconfig.json. Typescript doesn't accept empty global files when
isolatedModules is set to
true which is mandatory for next.js projects. If you're going to have non empty
globalTypes.ts, you may consider removing it from exclude.
There is currently an issue and a related pr to not produce
globalTypes.ts if it's empty.
If you want to add Apollo GraphQL to your existing project first install the dependencies