阿波罗工作室可嵌入式探索器
此 repo 主机为 Aporo Studio 的可嵌入探索器的源文件
使用 @ apollo/ 探索 npm 软件包
您可以下载 @ apollo/ explorer npm 软件包 npm install @apollo/explorer。然后,可以导入阿波罗爆炸类或阿波罗爆炸等组件:
import { ApolloExplorer } from '@apollo/explorer';
import { ApolloExplorer } from '@apollo/explorer/react';
当你呼叫嵌入式爆炸器 构造器与一个 target 您的应用程序中的 html div 中, 探索者将在此元素中以 iframe 显示 。 检查所有的 配置选项 你的图表.
反应
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,
},
}}
/>
);
}
香草联署材料
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" />
原始 cdn 主机 umd 文件的实例
开发嵌入式探索器
cd 输入 packages/explorer 运行 npm run build:umd 用于构建嵌入式爆炸器在窗口被曝光的 umd 文件.
打开 examples/embeddedExplorer/localDevelopmentExample.html 测试您的变化。 (如果来源未设定, 请运行本地DevelopmentExample.html from Live Server(中文(简体) )
安装 Live Server 扩展到 localDevelopmentExample.html 点击“Go Live”
以反应为例开发嵌入式探索器
cd 输入 packages/explorer 运行 npm run build:cjs-esm 来构建 Cjs & esm 文件,其中阿波罗Explorer & 阿波罗Explorer React 被命名为导出.
我们有一个反应例应用, 使用我们的阿波罗爆炸器反应组件 使嵌入式探索器 位于src/examples/ react-example。 举个例子, npm run build 财务报告和审定财务报表 npm run start 内 react-example。在重建新的更改前,请确保删除 .parcel-cache 文件夹。 (TODO去掉包裹缓存)
序列图
直接通过计划连接到未注册的图表
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
通过认证连接到已注册的图表
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