9. Exercise: The ideal developer experience
7m

Exercise: The ideal developer experience

Using Apollo Explorer as a React component directly in your idp.

Using npx create-react-app . --template typescript as a starting point, install the use-deep-compare-effect and @apollo/explorer packages.

Next, embed explorer into the App.tsx file:

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { ApolloExplorer } from '@apollo/explorer/react';


export function EmbeddedExplorer() {
  return (
    <ApolloExplorer
      className="explorer"
      graphRef='Retail-Supergraph-6bnnli@current'
      persistExplorerState={false}
      initialState={{
        document: `query ExampleQuery {
  listAllProducts {
    title
  }
}
`,
        variables: {},
        headers: {},
        displayOptions: {
          showHeadersAndEnvVars: true,
          docsPanelState: 'open',
          theme: 'light',
        },
      }}
    />
  );
}
function App() {
  return (
    <div className="App">
      <EmbeddedExplorer />
    </div>
  );
}


export default App;

Now run the project and see explorer load in the browser 🎉

Bonus

Authoring operations with vs code extension

Download the Apollo VS Code extension

Create a apollo.config.js file at the root of your project and configure it for our :

module.exports = {
  client: {
    name: 'Retail-Supergraph-6bnnli',
    includes: ['./src/operations/**.graphql','./src/**.graphql', './src/**/*.js', './src/**/*.tsx'],
  }
};

Create an API key for our and add to a .env in at the root of your project:

APOLLO_KEY=service:Retail-Supergraph-6bnnli:76g8uino9.........

Verify you get auto-completion for writing an in your App.tsx. Install @apollo/client to use gql tags or create a .graphql file in the src folder:

import { gql } from "@apollo/client";


const MY_OPERATION = gql`
query {


}`
Bonus

Solutions

Previous

Share your questions and comments about this lesson

Your feedback helps us improve! If you're stuck or confused, let us know and we'll help you out. All comments are public and must follow the Apollo Code of Conduct. Note that comments that have been resolved or addressed may be removed.

You'll need a GitHub account to post below. Don't have one? Post in our Odyssey forum instead.