Optic is constantly building a dependency graph of how all the parts of your code described by its skills connect. This means that whenever an API on your backend changes, it knows which HTTP Requests need to be updated on your frontend.

Sync is designed to work across repositories and programming languages.

Calling Sync

There are two ways to call sync

  1. run optic sync from your terminal and press (return)
  2. or (if you're inside the interactive prompt) type sync, then press (return)

This will trigger Optic to walk the dependency graph and generate a pull request whenever it finds an invalid edge between two sections of code.

For example, here's the contents of my app.js

import express from 'express'

const app = express()

app.get('/hello-world', (req, res) => { //name: Hello World
  const firstName = req.query.firstName
  const lastName = req.query.lastName
  const greeting = req.get('X-HEADER-GREETING')
  res.send(`${greeting} ${firstName} ${lastName}`)

And here's the contents of a file called client.js

import request from 'request'

request.get({ uri: '/hello-world', qs: { firstName }, }, function (err, response, body) {  //source: Hello World -> optic:request-js/request-from-route {}


As you can see, the HTTP Request is out of sync with the API because it's missing the lastName query parameter and the X-HEADER GREETING header. This is just as invalid as calling a function w/ the wrong arguments, but for some reason we've learned not to expect pre-runtime feedback.

Conversely, if you ask Optic to check the dependency graph, it will quickly pick up on the misalignment:

You can press (space) to view, modify and apply the PR from your browser.


Next Steps: