In the 2.11 release of Dreamfactory we added support for GraphQL, the open sourced query language written by Facebook.  You can now harness the power of GraphQL inside of the API automation & integration structure of Dreamfactory.  Both REST and GraphQL offer advantages and disadvantages depending on your use case. There are several articles and posts out there expanding on this, but let’s walk through how to incorporate this service in your Dreamfactory instance.  GraphQL is available in all of our product levels: Open Source, Silver and Gold.

Create a new app.

  • Start by creating a new app in the Admin Dashboard named whatever you like.  For ease of use I recommending something very creative, such as GraphQL, or GraphiQL as we forked this 3rd party, in browser IDE to perform the query and mutation events.
  • Make sure to mark the app active and assign a default role to it.  Make sure the role has the correct privileges in order to interact with the service.
  • There are other ways to do this, but by creating an app you have an easy way to acquire the API key you will need later.

Install the software.

  • Once you get the app created it is time to start the install.  You will need to edit your composer.json file. You need to edit the file in two places:  The first is under the repositories statement and the second is under the require statement.
  • Under the repositories statement you need to add the type and url for the code.  It will be an object inside of the repositories array. See the image below and look at the top arrow.
  • Under the require statement add in the dependency for df-graphiqlAdding support for graphiql into your composer.json
  • Update the composer.json file to install the dependencies:
    composer update dreamfactory/df-graphiql --no-dev
  • clear the cache:
    php artisan cache:clear

Next, edit the graphiql package to add the Dreamfactory API key

  • vim vendor/dreamfactory/df-graphiql/resources/views/graphiql.php
  • Locate the API key section under the following note:API Key Entry
  • //Defines a GraphQL fetcher using the fetch API
  • You will see the headers object.  This is where you need to put your key:
  • ‘X-DreamFactory-API-key’: ‘YOUR_API_KEY’

Head back to the Launchpad section and you should see a screen similar to this:

GraphQL starting page with DreamFactory
  • This gives you a basic idea of some of the commands for GraphQL
  • If you click on the <Docs tab it will give you access to the query and mutation root types.  This documentation is all auto-generated from DreamFactory. As you click through you can see the type it returns, the arguments, etc.

Let’s create a query:

  • How do you get the schema of a connected SQL Server database for instance?
  • When you start to type in the name of the query, the text will start to auto correct, listing options that might match your query.auto fill text for graphiql
  • If you type in the name of the query: getSqlServerTable and hit the play button, it will return the field listings automatically.  You can then click on any of the fields and it will give you the type of the field. SQL_SERVER

Last Important Items:

  • Make sure you take notice of the syntax of the url.  This is how you will connect your DreamFactory project to the GraphQL queries and mutations.  It must always be in this order:
    https://ANY_BASE_URL/graphiql
  • After this base URL is established you can continue to interact with GraphQL as you would in any other GraphQL environment.

Here are some links to further your learning on GraphQL and GraphiQL:

Please let us know your thoughts, and share any cool projects you are working on.  Reach out on our social media pages or leave your thoughts below. Thanks for reading!