npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@apollo/explorer

v3.7.0

Published

This repo hosts the source for Apollo Studio's Embeddable Explorer

Downloads

7,215

Readme

Apollo Studio Embeddable Explorer

This repo hosts the source for Apollo Studio's Embeddable Explorer

See docs for usage details

Using the @apollo/explorer npm package

You can download the @apollo/explorer npm package with npm install @apollo/explorer. Then, you can import the ApolloExplorer class or ApolloExplorer component like so:

import { ApolloExplorer } from '@apollo/explorer';
import { ApolloExplorer } from '@apollo/explorer/react';

When you call the EmbeddedExplorer constructor with a target of an html div you have in your app, the Explorer will show up in an iframe in that element. Check out all the configuration options for your graph.

React

import { ApolloExplorer } from '@apollo/explorer/react';

function App() {

  return (
    <ApolloExplorer
      graphRef='acephei@current',
      endpointUrl='https://acephei-gateway.herokuapp.com',
      initialState={{
        document: `query Example {
me {
  id
}
}`,
        variables: {
          test: 'abcxyz',
        },
        displayOptions: {
          showHeadersAndEnvVars: true,
        },
      }}
    />
  );
}

Vanilla JS

import { ApolloExplorer } from '@apollo/explorer';

function App() {

  ...
  new ApolloExplorer({
      target: '#embeddableExplorer',
      graphRef: 'acephei@current',
      endpointUrl: 'https://acephei-gateway.herokuapp.com',
      initialState: {
        document: `query Example {
me {
  id
}
}`,
        variables: {
          test: 'abcxyz',
        },
        displayOptions: {
          showHeadersAndEnvVars: true,
        },
      },
  })
  ...

}

...
// style the iframe for your site
<style>
  iframe {
    height: 100%;
    width: 100%;
    border: none;
  }
</style>
<div id="embeddableExplorer" />

Examples from the raw cdn hosted umd file

Developing embedded Explorer

cd into packages/explorer and run npm run build:umd to build umd files where EmbeddedExplorer is exposed on window.

Open examples/embeddedExplorer/localDevelopmentExample.html to test your changes. (if origin is not set, run localDevelopmentExample.html from Live Server)

Install the Live Server extension on VSCode, then go to localDevelopmentExample.html and click 'Go Live'

Developing embedded Explorer with the React example

cd into packages/explorer and run npm run build:cjs-esm to build cjs & esm files where ApolloExplorer & ApolloExplorer React are named exports.

We have a React example app that uses our ApolloExplorer React component to render the embedded Explorer located in src/examples/react-example. To run this example, npm run build and npm run start in react-example. Make sure you delete the .parcel-cache folder before you rebuild for new changes. (TODO remove parcel caching)

Sequence Diagrams

Connecting to unregistered graphs by directly passing in schema

sequenceDiagram
    participant Parent as Parent Page
    participant Embed as Embedded Explorer

    note over Parent: Render iframe loading embed and start listening for messages.
    Parent->>Embed: Embed loads with initial state <br>(gql operation, variables, headers, persistence preference etc) <br>in the query params of the iframe.
    note over Embed: Loaded and sets initial state<br> from query params.
    note over Embed: Start listening for messages

    Embed->>Parent: Handshake message asking for schema
    Parent->>Embed: Responds with schema

    note over Embed: Loads in given schema to explorer

    Embed --> Parent: Set up finished
    
    note over Embed: User submits operation
    Embed->>Parent: Send request contents
    note over Parent: Makes actual network request via `handleRequest()`
    Parent->>Embed: Send network response back
    note over Embed: Processes and renders response

Connecting to registered graphs by authentication

sequenceDiagram
    participant Parent as Parent Page
    participant Embed as Embedded Explorer
    participant Login as Studio Login Page at <br>studio.apollographql.com

    note over Parent: Render iframe loading embed and start listening for messages.
    Parent->>Embed: Embed loads with initial state <br>(gql operation, variables, headers, persistence preference etc) <br>in the query params of the iframe.
    note over Embed: Loaded and sets initial state<br> from query params.
    note over Embed: Start listening for messages

    Embed->>Parent: Handshake message asking for graphRef, <br>account id & account invite token if provided
        
    Parent->>Embed: Responds with graphRef, account id, account invite token

    Embed->>Parent: Authentication message asking for second half of<br> authentication token from parent page local storage

    alt when parent page has authentication token or graph is public
        Parent->>Embed: Responds with half auth token<br> from parent page local storage
    else when parent page doesn't have authentication token
        note over Embed: Renders login page
        note over Embed: User clicks 'login' on embed
        Embed ->>Login: Embed opens a new tab to <br>login page via window.open
        note over Login: Asks user to authenticate and<br> authorize this embed to use account
        note over Login: User accepts
        note over Login: Login page generates new <br>Studio API Key for this user
        Login ->> Embed: Sends Studio API Key over <br>postMessage via window.opener
        note over Embed: Splits key in 2, <br>stores half in local storage
        Embed ->> Parent: Sends other half of key to parent page
        note over Parent: Stores half of key in local storage
        Parent->>Embed: Responds with half auth token<br> from parent page local storage
    end


    note over Embed: Merges half key from parent page & half from embed local storage. <br>Uses this key for all future requests to Studio backend.

    note over Embed: Loads in schema & operation <br>collections for given graphRef from Studio servers

    Parent --> Login: Set up finished
    
    note over Embed: User submits operation
    Embed->>Parent: Send request contents
    note over Parent: Makes actual network request via `handleRequest()`
    Parent->>Embed: Send network response back
    note over Embed: Processes and renders response