hwillson

Using Apollo MCP Server with OpenAI Apps SDK

Overview

Apollo MCP Server integrates seamlessly with the OpenAI Apps SDK, allowing you to expose GraphQL operations in ChatGPT with custom visual components. This guide shows you how to configure your server to work with ChatGPT's component system.

---

Quick Start

hwillson

name	description
rover-operation-builder	Generate GraphQL operations (queries, mutations, subscriptions, fragments) using schemas fetched from Apollo GraphOS via Rover CLI. Use when the user wants to create GraphQL operations, write queries or mutations, build subscriptions, generate fragments, or needs help crafting GraphQL code based on their schema.

Rover Operation Builder Skill

This skill helps you generate proper GraphQL operations by fetching and analyzing schemas from Apollo GraphOS using the Rover CLI.

When to Use

hwillson

import { RocketData, RocketVars } from './types';

const GET_ROCKET_INVENTORY = gql`
  query getRocketInventory($year: Int!) {
    rocketInventory(year: $year) {
      id
      year
    }
  }
`;

hwillson

function Message() {
  const [saveMessage, { loading }] = useMutation(SAVE_MESSAGE);
  const [deleteMessage] = useMutation(DELETE_MESSAGE);
  const { data } = useQuery(GET_MESSAGE);

  return (
    <div>
      <p>
        {loading
          ? 'Loading ...'

hwillson

const LAST_LAUNCH = gql`
  query lastLaunch {
    launch {
      id
      timestamp
    }
  }
`;

export function LastLaunch() {

hwillson

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: new HttpLink({
    uri: 'http://localhost:4000/graphql',
  }),
  resolvers: {
    Launch: {
      isInCart: (launch, _args, { cache }) => {
        const { cartItems } = cache.readQuery({ 
          query: GET_CART_ITEMS 

hwillson

const GET_LAUNCH_DETAILS = gql`
  query LaunchDetails($launchId: ID!) {
    launch(id: $launchId) {
      isInCart @client
      site
      rocket {
        type
      }
    }
  }

hwillson

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: new HttpLink({
    uri: 'http://localhost:4000/graphql',
  }),
  typeDefs: gql`
    extend type Launch {
      isInCart: Boolean!
    }
  `,

hwillson

const client = new ApolloClient({
  // ...
  resolvers: {
    RentalCar: {
      numberAvailable(car) => {
        // Call into a separate car inventory tracking system, 
        // to get up to date car availibility.
        return CarTracker.isCarAvailable(car.id);
      },
    },

hwillson

// Example ApolloClient config including a fullName resolver to 
// combine first and last names.
const client = new ApolloClient({
  // ...
  resolvers: {
    Customer: {
      fullName(customer) => {
        return `${customer.firstName} ${customer.lastName}`;
      },
    },