Connect REST to the graph with just two directives - The Weekly Wisdom - Edition #2

About the Community Weekly Wisdom
, ,
1

Topic Banner Post (1)
Topic Banner Post (1)2572×456 55.2 KB

:spiral_calendar: Edition #2 - 15 May 2025
:label: Topic tags - Connectors odyssey
:bell: Stay in the loop: Subscribe to the “The Weekly Wisdom” category to get notified when new posts drop—no FOMO here.

Hey all! :waving_hand: @Michelle_Mabuyo here from the Apollo Education team, where I build courses for Odyssey, our official learning platform.

I’m back for the next edition of a multi-part series to teach you the basics of Apollo Connectors: a powerful way to bring existing REST APIs into your graph, all through configuration in the schema.

:light_bulb: This week’s learning: Connect REST to the graph with just two directives

Apollo Connectors transform the way we connect to REST APIs, simplifying API orchestration in a declarative, configuration-first approach.

All of the work happens in the schema. First, we define the types and fields that make up our API. Then, we configure our request to a data source and transform the response to a shape that fits with our schema. To do this, we use two GraphQL directives: @source and @connect.

With @source, we define the core information about the data source: its name and details, such as the base URL and any HTTP headers we want to include with the request.

@source(
  name: "products" # A unique identifier for the data source.
  http: {  # An object that defines the baseURL string and an array of headers for the data source
    baseURL: "https://products.example.com",
    headers: [{ name: "Authorization", from: "Authorization" }] }
)

The @connect directive attaches to a field in the schema. Here, we define the instructions for our request (to get the data) and the response (to map that data to the schema). Think of it as the resolver function for your field, but instead of procedural code and logic, we’re writing it declaratively in the schema.

@connect(
  # The request configuration
  source: "products"
  http: {
    GET: "/products",
    headers: [
      { name: "Authorization", from: "Authorization" },
      { name: "X-Api-Key", value: "ODYSSEY"}
    ]
  }
 # The response configuration
  selection: """
  id
  title
  description
  """
)

And that’s it for Connectors in the schema, just directives and configuration.

:magnifying_glass_tilted_right: Want to go deeper?

We dive into this topic in the Odyssey tutorial “GraphQL meets REST with Apollo Connectors”. Lesson 3 goes into the specifics of @source, @connect, and what role the router plans in all this.

TAKE THE COURSE

:speech_balloon: Share your thoughts in the thread below :down_arrow:

What stands out to you about the @connect directive? How does it compare to writing custom GraphQL resolvers?

1 Like