License: MIT License
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
I'm using embedded sandbox and want to disable the polling for schema updates.
This is my HTML document:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="height:100vh;margin:0px;overflow:hidden">
<script src="https://embeddable-sandbox.cdn.apollographql.com/_latest/embeddable-sandbox.umd.production.min.js"></script>
<script>
new window.EmbeddedSandbox({
target: 'body',
initialEndpoint: 'https://mygqlendpoint.example',
includeCookies: false,
initialState: {
pollForSchemaUpdates: false
},
runTelemetry: false
});
</script>
</body>
</html>I still get IntrospectionQuery requests on an interval.
Is there an issue with my code?
Hey! I recently made a plugin for Backstage that allows users to embed apollo graphs in their developer portal. I also opened this PR backstage/backstage#12766 to showcase the plugin on the Backstage plugin marketplace but wanted to make sure it would be ok to use the Apollo logo (Same one you guys have as the icon for this GitHub org).
If not we can always just use a generic GraphQL logo :)
Apollo Server v4's sandbox explorer landing page has a property named includeCookies.
The property is documented to default to false.
https://github.com/apollographql/apollo-server/blob/6808c3b960cac09d759ba6f3c9b3e22fcda2d286/docs/source/api/plugin/landing-pages.mdx#includecookies
However, when executing a query in the explorer against a local service the cookies are passed to the resolvers.
@apollo/server: 4.0.2
apollo-server-core: 3.10.3
apollo-server-express": 3.10.3
When includeCookies is set to false (the default) no cookies should be passed to the resolvers, in any scenario, including a local service
Cookies are passed to the resolvers in local service mode
It's a breaking change compared to Apollo Server v3
The problem may be coming from this line:
When includeCookies is false then the fetch credentials option is set to {} (empty object).
fetch defaults in that case to same-origin and therefore sends the cookies locally since they are the same origin. The correct value should be set explicitly to omit.
When I install @apollo/sandbox, I see the following warning from npm:
[email protected]: The ``subscriptions-transport-ws`` package is no longer maintained. We recommend you use ``graphql-ws`` instead. For help migrating Apollo software to ``graphql-ws``, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws For general help using ``graphql-ws``, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md
I suppose this is to support old versions of apollo server that still use the old subscriptions ws transport, but it's worth recording this in an issue even if this is wontfix
Seems there might be missing dependency in the package:
Compiled with problems:X
ERROR in ./node_modules/@apollo/explorer/EmbeddedExplorer-a17b5871.js 2:0-47
Module not found: Error: Can't resolve 'zen-observable-ts' in '/Users/martinwawrusch/Dev/roji/developer-roji-io/node_modules/@apollo/explorer'
ERROR in ./node_modules/@apollo/explorer/react/index.mjs 3:0-59
Module not found: Error: Can't resolve 'use-deep-compare-effect' in '/Users/martinwawrusch/Dev/roji/developer-roji-io/node_modules/@apollo/explorer/react'
ERROR in ./node_modules/@apollo/explorer/react/index.mjs 5:0-27
Module not found: Error: Can't resolve 'zen-observable-ts' in '/Users/martinwawrusch/Dev/roji/developer-roji-io/node_modules/@apollo/explorer/react'
It looks like there's an option to default to dark mode for the explorer, but not the sandbox. Or am I missing something?
There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.
Error type: Cannot find preset's package (apollo-open-source)
The sandbox textbox stopped getting the url from the endpoint query parameter instead it is setting the full browser url.
I am using apollo version 4
(If this is the wrong repo, please let me know)
Add a standard directive like @deprecated to an operation in your schema -> Explorer will display that directive in the schema docs located at https://studio.apollographql.com/sandbox/schema
Now add a custom directive like @auth to your schema --> Explorer doesn't seem to recognize this at all.
Is this intentional behavior? Feels like a bug,
Thanks!
Problem
When using the Sandbox Embedded Explorer locally,
after Authentication with Apollo Studio,
the Sandbox Embedded Explorer does not
have the preflight script functionality.
This causes friction for Apollo customers
who depend on preflight scripts for their
GraphQL requests.
Context
Proposal
When using the Sandbox Embedded Explorer locally,
after Authentication with Apollo Studio,
the Sandbox Embedded Explorer is able to
retrieve and invoke the preflight scripts
for their organization.
I tried creating a Next.js page to embed a local Sandbox instance since I cannot use the cloud-based instance to connect to my local API. However there are unexpected issues when doing so.
Error Message
Error [ERR_REQUIRE_ESM]: require() of ES Module node_modules/@apollo/sandbox/index.development.js from node_modules/@apollo/sandbox/index.cjs not supported.
index.development.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename index.development.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in node_modules/@apollo/sandbox/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
Reproduction:
npm run devlocalhost:3000/sandboxUnable to add headers to explorer/sandbox configuration. Issue exists in incognito mode and no plugins enabled.
Browser: Firefox 112.0.1
OS: MacOS Ventura 13.2.1
Can we get a new release pushed to npm with #250 in it?
Hi there,
Do you have any plans for being able to hide the response tab in the explorer or even just having it "closed" similar to how you can set a displayOption for docsPanelState: 'closed' | 'open'?
Our use case is that we want to be able to query via the graphql embedded component but then we handle rendering that data ourselves rather than showing it in the explorer
Hello,
I am looking to use the embedded explorer as part but couldn't find any documentation related to theming the explorer UI. Also I was looking for the ability to remove the login button and the ability to change logo from the explorer.
Is it possible to do these things as of right now? or if you are open to implement these in the future, then I can help.
It seems we are unable to load the embedded packages inside of nextjs.
Steps to reproduce:
create-next-app@apolllo/sandbox /or/ @apollo/explorer and graphql to dependenciesFail to import with an error:
error - Error: Cannot find module './index.development.js'
Require stack:
- /Users/matt/code/apollo/nextjs-sandbox/sandbox-test/node_modules/@apollo/sandbox/index.cjs
- /Users/matt/code/apollo/nextjs-sandbox/sandbox-test/.next/server/pages/index.js
- /Users/matt/code/apollo/nextjs-sandbox/sandbox-test/node_modules/next/dist/server/require.js
- /Users/matt/code/apollo/nextjs-sandbox/sandbox-test/node_modules/next/dist/server/next-server.js
- /Users/matt/code/apollo/nextjs-sandbox/sandbox-test/node_modules/next/dist/server/next.js
- /Users/matt/code/apollo/nextjs-sandbox/sandbox-test/node_modules/next/dist/server/lib/start-server.js
- /Users/matt/code/apollo/nextjs-sandbox/sandbox-test/node_modules/next/dist/cli/next-dev.js
- /Users/matt/code/apollo/nextjs-sandbox/sandbox-test/node_modules/next/dist/lib/commands.js
- /Users/matt/code/apollo/nextjs-sandbox/sandbox-test/node_modules/next/dist/bin/next
at Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
at mod._resolveFilename (/Users/matt/code/apollo/nextjs-sandbox/sandbox-test/node_modules/next/dist/build/webpack/require-hook.js:27:32)
at mod._resolveFilename (/Users/matt/code/apollo/nextjs-sandbox/sandbox-test/node_modules/next/dist/build/webpack/require-hook.js:27:32)
at mod._resolveFilename (/Users/matt/code/apollo/nextjs-sandbox/sandbox-test/node_modules/next/dist/build/webpack/require-hook.js:27:32)
at Module._load (node:internal/modules/cjs/loader:841:27)
at Module.require (node:internal/modules/cjs/loader:1061:19)
at require (node:internal/modules/cjs/helpers:103:18)
at Object.<anonymous> (/Users/matt/code/apollo/nextjs-sandbox/sandbox-test/node_modules/@apollo/sandbox/index.cjs:5:20)
at Module._compile (node:internal/modules/cjs/loader:1159:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1213:10) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/Users/matt/code/apollo/nextjs-sandbox/sandbox-test/node_modules/@apollo/sandbox/index.cjs',
'/Users/matt/code/apollo/nextjs-sandbox/sandbox-test/.next/server/pages/index.js',
'/Users/matt/code/apollo/nextjs-sandbox/sandbox-test/node_modules/next/dist/server/require.js',
'/Users/matt/code/apollo/nextjs-sandbox/sandbox-test/node_modules/next/dist/server/next-server.js',
'/Users/matt/code/apollo/nextjs-sandbox/sandbox-test/node_modules/next/dist/server/next.js',
'/Users/matt/code/apollo/nextjs-sandbox/sandbox-test/node_modules/next/dist/server/lib/start-server.js',
'/Users/matt/code/apollo/nextjs-sandbox/sandbox-test/node_modules/next/dist/cli/next-dev.js',
'/Users/matt/code/apollo/nextjs-sandbox/sandbox-test/node_modules/next/dist/lib/commands.js',
'/Users/matt/code/apollo/nextjs-sandbox/sandbox-test/node_modules/next/dist/bin/next'
],
page: '/'
}
When using ApolloServerPluginLandingPageLocalDefault, the headers option is used for every graphql query, except for the IntrospectionQuery one, which is an issue in our case because we are expecting a specific custom header for all our graphql queries.
This used to work with Apollo Server v3.
N/A
ApolloServerPluginLandingPageLocalDefault({
headers: {
'x-custom': 'foobar',
},
})const GraphQLPage = (props: GraphQLPageProps) => {
const [query, setQuery] = useState<string>("EXAMPLE QUERY");
const [showGraphqlHeader, setShowGraphqlHeader] = useState<boolean>(false);
return (
<div>
<button onClick={() => setQuery("query { hello }")}>Hello</button>
{query}
<div className="flex flex-col items-end">
<button onClick={() => setShowGraphqlHeader(!showGraphqlHeader)}>
Show header
</button>
<div className="overflow-hidden h-[calc(60vh)] w-full">
<ApolloExplorer
graphRef={"helicone@main"}
initialState={{
document: query,
displayOptions: {
theme: "light",
docsPanelState: "closed",
showHeadersAndEnvVars: false,
},
}}
className={clsx(showGraphqlHeader || "-mt-14", "h-full")}
runTelemetry={false}
key={query}
/>
</div>
</div>
</div>
);
};When using setState. it is not changing the text in the ApolloExplorer
Hi,
embeddedSandbox seems to not be exposed in the npm package.
Can I ask why?
thanks in advance for your hard work!
Are there any plans to allow showing the SDL within the embeddable explorer, similar to https://studio.apollographql.com/sandbox/schema/sdl ?
If not, any key pointers for users wishing to roll their own display of the SDL?
The links in the examples section of the README return 404
The _latest tag on the CDN (https://embeddable-explorer.cdn.apollographql.com/_latest/embeddable-explorer.umd.production.min.js) is out of sync with the NPM package. Please update it.
-Allow passing an argument to the constructor of EmbeddedSandbox to set shouldAutoUpdateSchema: false
-Listen for an event which will allow the user to update the value of shouldAutoUpdateSchema
When I generate an operation I have the options to format, copy as curl, copy a link, etc. I would like the ability to generate the APQ request with the extensions block and the operation hash for me so I can test APQ/PQ operations quickly
It would also be nice to generate the payload I can send with APQ in curl too
The sandbox embedded explorer continuously performs introspection queries on a regular interval.
The POST queries are sending cookies to the Apollo server. Right now there is no way to prevent his behavior. The includeCookies property doesn't affect this behavior even with the fixed issue:
#176
@apollo/server: 4.0.2
Sandbox CDN production JS as of Oct 27 2022
When includeCookies is set to false (the default) no cookies should be passed to the apollo server backend, in any scenario, including a local service, for introspection queries.
Cookies are passed with introspection queries in local service mode
query with introspection - the cookies are sent with the requestThe issues seems to be coming from the following fetch POST logic for introspection queries:
A possible solution is to change executeIntrospectionRequest to accept a handleRequest function and then call handleRequest instead of calling fetch
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These problems occurred while renovating this repository. View logs.
These updates are currently rate-limited. Click on a checkbox below to force their creation now.
fs-extra, @types/fs-extra)@typescript-eslint/eslint-plugin, @typescript-eslint/parser)These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.
@size-limit/preset-small-lib, size-limit)These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
@babel/core, @rollup/plugin-babel, @rollup/plugin-commonjs, @rollup/plugin-json, @rollup/plugin-node-resolve, @rollup/plugin-typescript, @types/fs-extra, bundlewatch, eslint-config-prettier, eslint-plugin-jsx-a11y, eslint-plugin-prettier, eslint-plugin-react, fs-extra, rollup, rollup-plugin-terser)@changesets/changelog-github, @changesets/cli, @rollup/plugin-typescript, @types/react, @types/react-dom, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, circleci/node, eslint, eslint-plugin-import, eslint-plugin-jsx-a11y, eslint-plugin-react, eslint-plugin-react-hooks, eventemitter3, gcp-cli, node, npm, prettier, react, react-dom, rollup, secops, tslib).circleci/config.yml
gcp-cli 2.4.0secops 2.0.6circleci/node 14.17.0-browsers
.github/workflows/main.yml
actions/checkout v3actions/setup-node v3.github/workflows/release-pr.yaml
actions/checkout v3actions/setup-node v3changesets/action v1.github/workflows/size.yml
actions/checkout v3andresz1/size-limit-action v1
package.json
@babel/core ^7.18.5bundlewatch ^0.3.1@changesets/changelog-github 0.4.4@changesets/cli 2.22.0@rollup/plugin-babel ^5.3.1@rollup/plugin-commonjs ^22.0.1@rollup/plugin-json ^4.1.0@rollup/plugin-node-resolve ^13.3.0@rollup/plugin-typescript ^8.3.2@size-limit/preset-small-lib 5.0.5@types/fs-extra ^9.0.13@types/react 18.0.8@types/react-dom 18.0.3@typescript-eslint/eslint-plugin 5.21.0@typescript-eslint/parser 5.21.0eslint 8.14.0eslint-config-prettier ^8.5.0eslint-plugin-import 2.26.0eslint-plugin-jsx-a11y ^6.5.1eslint-plugin-prettier ^3.3.1eslint-plugin-react ^7.29.4eslint-plugin-react-hooks 4.5.0fs-extra ^10.1.0graphql 16.8.1husky 7.0.4prettier 2.6.2react 18.1.0react-dom 18.1.0rollup ^2.75.6rollup-plugin-terser ^7.0.2size-limit 5.0.5tslib 2.3.1typescript 4.9.5node >=12.0npm >=7.0node 16.13.0npm 8.3.1packages/explorer-helpers/package.json
@types/whatwg-mimetype ^3.0.0whatwg-mimetype ^3.0.0zen-observable-ts ^1.1.0node >=12.0npm >=7.0node 16.13.0npm 8.3.1packages/explorer/package.json
@types/whatwg-mimetype ^3.0.0graphql-ws ^5.9.0subscriptions-transport-ws ^0.11.0whatwg-mimetype ^3.0.0zen-observable-ts ^1.1.0react ^16.8.0 || ^17.0.0 || ^18.0.0react-dom ^16.8.0 || ^17.0.0 || ^18.0.0use-deep-compare-effect ^1.8.1node >=12.0npm >=7.0node 16.13.0npm 8.3.1packages/sandbox/package.json
@types/whatwg-mimetype ^3.0.0eventemitter3 3.1.0graphql-ws ^5.9.0subscriptions-transport-ws ^0.11.0whatwg-mimetype ^3.0.0zen-observable-ts ^1.1.0react ^16.8.0 || ^17.0.0 || ^18.0.0react-dom ^16.8.0 || ^17.0.0 || ^18.0.0node >=12.0npm >=7.0node 16.13.0npm 8.3.1
Deprecation of input values has now been merged into the GraphQL spec. This includes a modification to the introspection query.
Without includeDeprecated = true on inputFields in the introspection query, an error occurs on any input objects that have all fields deprecated:
Error: Invalid schema from introspection: Input Object type <typename> must define one or more fields.
GraphiQL now has a flag that determines whether the introspection query should include includeDeprecated = true on inputFields, since only compatible graphs will know about this argument. Sandbox/explorer could do something similar or somehow autodetect whether the graph supports deprecation of input fields.
You just need to set the inputValueDeprecation arg in the graphql-js getIntrospectionQuery function.
The current version of our site had an API page where users could start with different queries to edit in the playground. This was done by setting the playground's iframe to the url+"?query=blahblahblah" when the user wanted to run a specific query.
See: https://pharos.nih.gov/api
Upgrading to the embedded apollo sandbox it doesn't seem like I can do that anymore. I can set an initialState, but it only works if the user has never used the sandbox before, because the initialState I set seems to get overwritten by the user's previous query.
I'd like to be able to send a new query to the sandbox that the user can edit and run. Is there a way to do that?
When running an apollo non-prod landing page, disabling telemetry does not seem to work.
npm start and open the server landing page at http://localhost:4000/There should be no calls to external hosts:
Calls are made to the following hosts:
import { ApolloServer } from '@apollo/server';
import { startStandaloneServer } from '@apollo/server/standalone';
import { ApolloServerPluginLandingPageLocalDefault, ApolloServerPluginLandingPageProductionDefault } from '@apollo/server/plugin/landingPage/default';
// A schema is a collection of type definitions (hence "typeDefs")
// that together define the "shape" of queries that are executed against
// your data.
const typeDefs = `#graphql
# Comments in GraphQL strings (such as this one) start with the hash (#) symbol.
# This "Book" type defines the queryable fields for every book in our data source.
type Book {
title: String
author: String
}
# The "Query" type is special: it lists all of the available queries that
# clients can execute, along with the return type for each. In this
# case, the "books" query returns an array of zero or more Books (defined above).
type Query {
books: [Book]
}
`;
const books = [
{
title: 'The Awakening',
author: 'Kate Chopin',
},
{
title: 'City of Glass',
author: 'Paul Auster',
},
];
// Resolvers define how to fetch the types defined in your schema.
// This resolver retrieves books from the "books" array above.
const resolvers = {
Query: {
books: () => books,
},
};
// The ApolloServer constructor requires two parameters: your schema
// definition and your set of resolvers.
const server = new ApolloServer({
typeDefs,
resolvers,
plugins: [
// Install a landing page plugin based on NODE_ENV
process.env.NODE_ENV === 'production'
? ApolloServerPluginLandingPageProductionDefault({
graphRef: 'my-graph-id@my-graph-variant',
footer: false,
})
: ApolloServerPluginLandingPageLocalDefault({
footer: false,
embed: {
runTelemetry: false,
}
}),
],
});
// Passing an ApolloServer instance to the `startStandaloneServer` function:
// 1. creates an Express app
// 2. installs your ApolloServer instance as middleware
// 3. prepares your app to handle incoming requests
const { url } = await startStandaloneServer(server, {
listen: { port: 4000 },
});
console.log(`🚀 Server ready at: ${url}`);Reading the documentation I cannot find a way to pass connectionParams in subscriptions.
We use connectionParams for authorization.
Did I miss something or there is no way to pass connectionParams ?
I can make an actual repo if the zip file doesn't work. CodeSandbox isn't a good repro for this because of all the extra noise in the network tab.
npm i && npm start
Open network tab, observe request to stripe
server-typescript-1689955125468.zip
Reported here: apollographql/apollo-server#7623
Given the simplest of Apollo Server instances, run Sandbox and inspect the browser's logs for:
Failed to load resource: the server responded with a status of 400 (Bad Request)
:4000/favicon.ico:1
Repro:
npm init -y
npm i @apollo/server graphql
touch index.js// index.js
import { ApolloServer } from "@apollo/server";
import { startStandaloneServer } from "@apollo/server/standalone";
const server = new ApolloServer({
typeDefs: `#graphql
type Query {
hello: String
}
`,
});
startStandaloneServer(server, { listen: { port: 4000 } }).then(() => {
console.log("Server running at http://localhost:4000");
});node index.jsI have embedded your snippet of code from the documentation in my web application. The embedded section works fine, but the server response mock option does not work (does not apply):
Tell me please if it is possible to add support for this option or I have understood something wrong and this option works ?
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.