Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

NEBULA-1385: Add initialState to embedable sandbox based on config #6628

Merged
merged 8 commits into from Jul 5, 2022
Merged

NEBULA-1385: Add initialState to embedable sandbox based on config #6628

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e347e53
Add initialState to embedable sandbox based on config
William010x Jun 28, 2022
0df5c73
Update docs to include new supported API
William010x Jun 28, 2022
c3d22e4
Only add specific properties to initial state
William010x Jun 28, 2022
60ebbc3
Update type for variables in API docs
William010x Jun 28, 2022
62019bc
Add unit tests for landing page config HTML
William010x Jun 29, 2022
719587c
Make code prettier
William010x Jun 29, 2022
6a7d5a0
Code review comments
William010x Jun 29, 2022
30ed632
Update CHANGELOG.md
William010x Jun 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
46 changes: 46 additions & 0 deletions docs/source/api/plugin/landing-pages.md
View file
Open in desktop
Expand Up @@ -106,6 +106,52 @@ By default, the landing page displays a footer that links to the documentation t
<tr>
<td>

###### `document`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do these get passed through to sandbox in the regular landing page? We were just missing them before but they are supported right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yup! they were always in ApolloServerPluginLandingPageDefaultBaseOptions, but just not mentioned in the docs


`string`
</td>
<td>

A GraphQL document (eg, query or mutation) to populate in the Studio Explorer's editor on load.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
A GraphQL document (eg, query or mutation) to populate in the Studio Explorer's editor on load.
A GraphQL document (eg, query or mutation) to populate in the Studio Sandbox Explorer's editor on load.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we still want to add this? This API applies to both sandbox and explorer, right?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the local dev docs, so they will only ever lead to sandbox afaict

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no strong opinion tho!


If you omit this, the Explorer initially loads an example query based on your schema.

</td>
</tr>

<tr>
<td>

###### `variables`

`Record<string, string>`
</td>
<td>

An object containing initial variable values to populate in the Explorer on load.

If provided, these variables should apply to the initial query you provide in `document`.

</td>
</tr>

<tr>
<td>

###### `headers`

`Record<string, string>`
</td>
<td>

An object containing initial HTTP header values to populate in the Explorer on load.

</td>
</tr>

<tr>
<td>

###### `includeCookies`

`boolean`
Expand Down
1 change: 1 addition & 0 deletions packages/apollo-server-core/src/plugin/landingPage/default/index.ts
View file
Open in desktop
Expand Up @@ -142,6 +142,7 @@ id="embeddableSandbox"
target: '#embeddableSandbox',
initialEndpoint,
includeCookies: ${config.includeCookies ?? 'false'},
initialState: ${config},
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

initialState should only have 3 properties, maybe better to be explicit about passing only what it expects?

Suggested change
initialState: ${config},
initialState: ${{
document: config.document ?? undefined,
variables: config.variables ?? undefined,
headers: config.headers ?? undefined,
}},

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@William010x and I identified that you can't just drop an object into a string template like this (you get an [object Object]), so it's now JSON.stringify()ed.

Additionally, I'll mention that the type of initialState is now a string and it'll need to be JSON.parse()d in the constructor to be useful.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With the substitutions in the template string (${JSON.stringify(expression)}), it actually removes the quotes surrounding the JSON object string, so the returned HTML string will look something like:

<script>
  var initialEndpoint = window.location.href;
  new window.EmbeddedSandbox({
    target: '#embeddableSandbox',
    initialEndpoint,
    includeCookies: false,
    initialState: {"document":"query test { id }","variables":{"v":"1"},"headers":{"h":"2"}},
  });
</script>

I tested this HTML string with the Embedded Sandbox and it seems to work without needing to JSON.parse().

Alternatively, doing something like these (similar to the embeddedExplorerHTML) also works

<script>
  var initialEndpoint = window.location.href;
  var state = ${JSON.stringify({
      document: config.document ?? undefined,
      variables: config.variables ?? undefined,
      headers: config.headers ?? undefined,
    })};
  new window.EmbeddedSandbox({
    target: '#embeddableSandbox',
    initialEndpoint,
    includeCookies: ${config.includeCookies ?? 'false'},
    initialState: state,
  });
</script>

<script>
  var initialEndpoint = window.location.href;
  var state = ${JSON.stringify({
      document: config.document ?? undefined,
      variables: config.variables ?? undefined,
      headers: config.headers ?? undefined,
    })};
  new window.EmbeddedSandbox({
    target: '#embeddableSandbox',
    initialEndpoint,
    includeCookies: ${config.includeCookies ?? 'false'},
    initialState: {
        ...state
    },
  });
</script>

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll look into adding proper unit tests for this though!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Neat, yeah if it's not adding quotes like I expected then you should be all set!

});
</script>
`;
Expand Down