Pass user input into a GraphQL API call

Problem

You have user input from a UI component that needs to be used in a GraphQL API call.

Solution

To pass user input from the client to a GraphQL API request use GraphQL variables and interpolation.

1. Add the UI component on your Page or Component (e.g. an Input named input)
2. Create a new Page Function and select Make a GraphQL Request
3. Jump to the GraphQL Resource by clicking the > next to the resource name, and configure your Base URL and Headers
4. Enter the Query for the request and include a GraphQL $variableName:

query MyQuery($variableName: String!) {
  __typename
	// ... rest of GraphQL query, using $variableName
}

5. Enter the following in variables to bind the input value to the $variableName:

{
	variableName: {{ input.value }}
}

6. Save and test your function

Discussion

• Binding expressions within the double curly braces can contain any valid ES2020 expression. The expression is always evaluated client-side first and sent to the server for proxying.
• Since all requests are proxied by the backend, you do not have to consider CORS / CSP headers.
• You can configure the resource’s base path and default headers in the GraphQL Resource’s settings.
• Avoid putting secrets such as Authorization header tokens in headers directly. Instead, use secrets using the ${{ MY_SECRET }} syntax.

See also

• Securely store and use a secret
• Pass user input into a SQL query
• Pass user input into a REST API call
• Make a function run automatically