Flower Docs
  • OpenFlower overview
    • The "Hello World" tutorial
  • Videos
    • OpenFlower in 100 seconds
  • 🆕Setup and run
    • Cloud & Private Cloud
    • Self-hosting
      • Access local database or API
      • Google Cloud Platform
      • Heroku
      • Migration from Openblocks
      • Update MongoDB Versions
      • OpenFlower Version Update
      • Traefik loadbalancer
      • SMTP Server
    • Security
  • 🏨Workspaces & Teamwork
    • Workspaces
    • Members and Groups
    • Permissions for Resources
    • OAuth
      • KeyCloak
      • Google
      • GitHub
      • Generic OAuth Provider
    • Query library
    • OpenFlower Marketplace
  • ✨Build Applications
    • Create a new App
      • Modules
      • Version and Release Management
    • App Editor
      • Visual Components
        • Common Component Settings
        • File upload
        • Charts and graphs
        • Image
        • Option lists
        • List View
        • Drawer
        • Google Maps
        • Table
        • Messages / Toast
        • Calendar
      • Date handling
      • Bulk Editing
      • Layers
      • Data selection & Javascript
      • Use Markdown
      • Keyboard shortcuts
    • App Navigation
    • App Interaction
      • Event handlers
    • Themes & Styling
      • Design an efficient and user-friendly form
      • Customize Styles
      • Component Styling Possibilities
  • 🚀Connect your Data
    • Data source basics
    • Data sources in OpenFlower
      • APIs as Datasource
        • REST API
        • GraphQL
        • Google Sheets
      • SQL Databases
        • MySQL
        • MariaDB
        • PostgreSQL
        • Microsoft SQL Server
        • Oracle
      • NoSQL Databases
        • MongoDB
        • CouchDB
        • DynamoDB
      • InMemory Databases
        • Redis
      • File Storages
        • S3 File Storage
      • BigData & OLAP
        • Big Query
        • Snowflake
        • ClickHouse
        • Elasticsearch
      • Websocket Datasource
    • Query basics
      • Bind Query Data to Components
      • Query library
  • 🪄Workflows
    • n8n Integration
  • 💫Business Logic in Apps
    • Write JavaScript
      • JavaScript query
      • Temporary state
      • Transformers
      • Data responder
      • Built-in JS functions
  • 🙌Publish Apps
    • Share an App
    • Publish an App
    • Embedd an App
      • Embed Apps in React
      • Native embed SDK
        • Build the SDK from Source
  • 🔥OpenFlower Extension
    • Opensource Contribution
      • Develop UI components for Apps
      • Develop Data Source Plugins
    • Use third-party libraries in Apps
      • Day.js Date handling
      • Import your own JavaScript Library
    • Custom component
    • OpenFlower Open REST API
Powered by GitBook
On this page
  • Connect GraphQL API to OpenFlower
  • Authentication type
  • SSL Cert Verification
  • Forward cookies
  • Create a GraphQL query
  • Create a query with a new data source
  • Create a query with predefined data source
  1. Connect your Data
  2. Data sources in OpenFlower
  3. APIs as Datasource

GraphQL

PreviousREST APINextGoogle Sheets

Last updated 7 months ago

GraphQL query language allows the client to specify the structure of the requested data, and returns data from the server using the same structure. Such design ensures that only required data is retrieved, thus improving query efficiency.

Connect GraphQL API to OpenFlower

Follow these steps to connect to GraphQL APIs.

  1. Click Data Sources on the OpenFlower homepage.

  2. Click New data source on the upper right. This permission is restricted to workspace admins and developers.

  3. Select APIs > GraphQL.

  4. Configure general settings. At a minimum, input Name and the base URL of the API to connect to. Headers and Parameters are optional.

  5. Configure Authentication Type.

  6. Click Save.

You can also connect to a new GraphQL API data source when creating or editing queries in query library or query editor.

Authentication type

By default, the authentication type is None. You can configure it as Basic or Digest, which require Username and Password. If you need other authentication methods, contact our customer service on the .

The following is an example of connecting to . Set the authentication type to None. Then, input the required information into Headers to complete the authentication. The key is "Authorization" and the value is "Bearer" + white space + YOUR_ACCESS_TOKEN. See for detailed information.

SSL Cert Verification

For detailed information, see SSL Cert Verification.

Forward cookies

For detailed information, see Forward cookies.

Create a GraphQL query

You can create GraphQL queries in two ways:

  • add a new data source and then create a query

  • create a query directly

Note that without creating a new data source, the GraphQL data source is not stored in your Data Sources and thus cannot be accessed to build other queries.

Create a query with a new data source

Follow the steps to add a new GraphQL data source first and then create a query.

  1. Connect GraphQL API to access to.

  2. In the query editor, click + New.

  3. Select the added API in Data source.

  4. Write a query.

  5. Click ▶ Run.

The following GraphQL query searches the latest 20 closed issues in the repository octocat/Hello-World, and returns the title, URL, and the first 5 labels of each issue.

Create a query with predefined data source

Follow the steps to create a GraphQL query directly.

  1. In the query editor, click + New.

  2. Select GraphQL Query in Data sources. OpenFlower offers this built-in plain data source so that you can quickly create GraphQL queries without adding a new data source first.

  3. Enter URL, Query, Variables, Parameters, and fill in other fields if needed.

  4. Click ▶ Run.

For details about using GraphQL, reference .

🚀
homepage
GitHub GraphQL API
Creating a personal access token
Introduction to GraphQL