payloadcms/payload

Can't configure for Apollo Studio Sandbox

Closed this issue · 4 comments

CaptainN commented

Describe the Bug

It seems it should be possible to configure Payload 3.0 so that Apollo Studio Sandbox can be used. IT requires that some CORS settings be added. But I can't figure out how to add the 'access-control-allow-methods: POST' header to the OPTIONS response on the graphql end point. There is some information in the CORS docs about how to add additional headers, but it only shows a single key example, and isn't super clear on how to set a value.

Link to the code that reproduces this issue

https://github.com/CaptainN/payloadcms-apollo-studio-sandbox-example

Reproduction Steps

Check out and run that example, then try to connect to it from Apollo Studio Sandbox. There are 2 commits - the second commit shows everything that should be required to get this to work.

There is also a diagnostic tool that Apollo offers which suggests the following command:

❯ npx diagnose-endpoint@1.1.0 --endpoint="http://localhost:3001/api/graphql"
Diagnosing http://localhost:3001/api/graphql
⚠️  OPTIONS response is missing header 'access-control-allow-methods: POST'
(📫 Interested in previewing a local tunnel to bypass CORS requirements? Please let us know at https://docs.google.com/forms/d/e/1FAIpQLScUCi3PdMerraiy6GpD-QiC_9KEKVHr4oDL5Vef5fIvzqqQWg/viewform )

Which area(s) are affected? (Select all that apply)

area: core

Environment Info

❯ pnpm payload info

apollo-studio-sandbox@1.0.0 payload /Users/kevin.newman/repos/apollo-studio-sandbox
cross-env NODE_OPTIONS=--no-deprecation payload "info"

Binaries:
Node: 20.11.1
npm: 10.2.4
Yarn: 1.22.22
pnpm: 9.12.0
Relevant Packages:
payload: 3.0.0-beta.122
next: 15.0.0
@payloadcms/db-postgres: 3.0.0-beta.122
@payloadcms/email-nodemailer: 3.0.0-beta.122
@payloadcms/graphql: 3.0.0-beta.122
@payloadcms/live-preview: 3.0.0-beta.122
@payloadcms/live-preview-react: 3.0.0-beta.122
@payloadcms/next/utilities: 3.0.0-beta.122
@payloadcms/payload-cloud: 3.0.0-beta.122
@payloadcms/plugin-form-builder: 3.0.0-beta.122
@payloadcms/plugin-nested-docs: 3.0.0-beta.122
@payloadcms/plugin-redirects: 3.0.0-beta.122
@payloadcms/plugin-search: 3.0.0-beta.122
@payloadcms/plugin-seo: 3.0.0-beta.122
@payloadcms/richtext-lexical: 3.0.0-beta.122
@payloadcms/translations: 3.0.0-beta.122
@payloadcms/ui/shared: 3.0.0-beta.122
react: 19.0.0-rc-65a56d0e-20241020
react-dom: 19.0.0-rc-65a56d0e-20241020
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 23.6.0: Wed Jul 31 20:49:39 PDT 2024; root:xnu-10063.141.1.700.5~1/RELEASE_ARM64_T6000
Available memory (MB): 65536
Available CPU cores: 10

CaptainN commented

I ran the REST_OPTIONS through the /api/graphql end point, and it actually solves the npx diagnose-endpoint problem, but Sandbox still doesn't load the end point:

❯ npx diagnose-endpoint@1.1.0 --endpoint="http://localhost:3001/api/graphql"
Diagnosing http://localhost:3001/api/graphql
Failed to diagnose any problems with the endpoint. Please email explorer-feedback@apollographql.com with the endpoint to help us investigate🙏
CaptainN commented

It's able to grab the OPTIONS call, but errors with a CORS error when trying to run the introspection query:
Image

paulpopus commented

With the above fix, I've actually been able to connect the sandbox explorer with the following config:

cors: ['http://localhost:3000', 'http://localhost:3001', 'https://studio.apollographql.com'],

But cors: '*' also works

In the sandbox explorer, set the URL to your graphql API endpoint: http://localhost:3000/api/graphql

Restart the dev command whenever modifying cors config to make sure its fully working.

github-actions commented

This issue has been automatically locked.
Please open a new issue if this issue persists with any additional detail.