diff --git a/site/src/routes/api/react/+page.svx b/site/src/routes/api/react/+page.svx index f02778d52..f3812441d 100644 --- a/site/src/routes/api/react/+page.svx +++ b/site/src/routes/api/react/+page.svx @@ -4,7 +4,7 @@ description: Documentation for Houdini's application framework --- # React Framework @@ -191,6 +191,47 @@ query ShowInfo($id: ID!) { } ``` +#### Runtime Scalars + +An unforunate reality is that not all query variables can be embeded as route paramters. A common example of this +is information that's embedded in your application's session. To support this, we are working on an experimental API +known as Runtime Scalars. + + + +To enable and configure this feature, you must provide an object to the `runtimeScalars` feature config: + +```javascript:title=houdini.config.js +export default { + // ... + features: { + runtimeScalars: { + OrganizationFromSession: { + type: 'ID', + resolve: ({session}) => session.organization + } + } + } +} +``` + +With that defined, you can now use it as a scalar in a query and Houdini will call the configured +`resolve` function to generate the variable value: + +```graphql:title=+page.gql +query OrganizationInfo($id: OrganizationFromSession!) { + organization(id: $id) { + name + } +} +``` + +Please keep in mind that this feature is still considered experimental and could change with any +minor version. + + + + ### Imperative Handles Sometimes you need to perform some imperative task on a query (refetching, loading the next page, etc). For these