Trying out GraphQL with Unity3d engine
Tags: unity3d, graphql
Published: 2019-07-05 08:15:28

---
title: Trying out GraphQL with Unity3d engine
published: true
description: This post is an overview of how I played around with GraphQL in Unity3d game engine.
tags: Unity3D, GraphQL
---

GraphQL is an amazing technology that took the world like a storm. More and more companies are switching to using GraphQL instead of REST APIs because so many things, GraphQL solves. 

In a nutshell, GraphQL is a query language for your API. It gives you an ability from a client-side to query your single API endpoint and define a shape of data that you want to get. On the server, you define a schema - the shape of data and how this data is resolved. Whether from a database, microservices or literally in any way you want. 

What's also cool, GraphQL gives you subscriptions functionality so you can get real-time data over WebSockets and build modern web and mobile apps with ease. If you are interested to learn more about GraphQL, you can check out [learn.hasura.io](https://learn.hasura.io) tutorials on how to use GraphQL with lots of various web and mobile clients. 
Also, you can check GraphQL Bootcamp I did some time ago on my [Youtube channel](https://www.youtube.com/c/VladimirNovickDev)

If you've been following me on twitter [@VladimirNovick](https://twitter.com/VladimirNovick) you probably know that I am working on Web, Mobile, AR, VR and IoT fields. 

In VR and AR fields especially I've been working with Unity3d engine, so I was recently curious whether I can use GraphQL in Unity3d for things like real-time leaderboards. 

After a long search for a graphql client for Unity3d, which I can use in C# and which will be supported in Unity engine, I found [really basic one](https://github.com/Gazuntype/graphQL-client-unity), that I used for the following demo. 

{% youtube zwdZC0tL-rI %}


So what's happening in this demo? 
There are 3 scenes, which I have:

First one is just a loading screen and here I just show basic Loading screen with 10 seconds timer. So nothing really happening here.

![](https://thepracticaldev.s3.amazonaws.com/i/1opjw9ifsvpdeqww682j.png)

Next loaded screen is `HasuraSpaceDemo`

I used [FPS All in One](https://assetstore.unity.com/packages/tools/input-management/first-person-all-in-one-135316) first-person controller and [Sci-Fi Modular corridor](https://assetstore.unity.com/packages/3d/environments/sci-fi/modular-sci-fi-corridor-142811) demo scene. For the portal, I used [KTK Lighting](https://assetstore.unity.com/packages/vfx/particles/ktk-lightning-effects-volume1-40978) asset to reduce time working on particle effects, but basically, it's just the Unity Shuriken particle system using a bunch of lighting assets. For UI and for Portal scene I used [Sci fi UI pack](https://assetstore.unity.com/packages/2d/gui/icons/sci-fi-ui-pack-psd-138176) and [Living particles](https://assetstore.unity.com/packages/vfx/particles/spells/living-particles-105817). Music in the scene is from [Dark Sci-fi asset](https://assetstore.unity.com/packages/audio/music/electronic/dark-sci-fi-music-pack-49862)

`HasuraSpaceDemo` is used to showcase that GraphQL can be used in any type of game. If you walk into the portal I present UI where you can basically enter any GraphQL endpoint URL. When you do so, you are "teleported" into different - `Portal` scene. 

I have `UIManager` script that handles UI:


```c#
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class UIManager : Singleton<UIManager>
{
    public string graphQLEndpoint;
    public GameObject graphQLCanvas;
    
    private void Start()
    {
        DontDestroyOnLoad(gameObject);
    }


    // Start is called before the first frame update
    public void LoadPortalScene()
    {
        GameManager.Instance.loadPortalScene();
    }
    
    public void setGraphQLEndpoint(Transform inputField)
    {
        graphQLEndpoint = inputField.GetComponent<InputField>().text;
    }

}

```

As you can see this script has two public methods - first one to load the portal scene and the second one to set `graphQLEndpoint` for later use in the next scene.

To use GraphQL in the next scene, what I do is, first of all, use `GraphQLQuery` script from [graphql-client-unity](https://github.com/Gazuntype/graphQL-client-unity) package and set it on new empty Game Object in the scene calling it `GraphQLClient`

![](https://thepracticaldev.s3.amazonaws.com/i/zhqwzsry300rmfaw1bq9.png)

Then I need to add a Panel that will have interaction. The idea is when I approach a panel with text "GraphQL Schema Introspection", I will enter into Box Collider which will trigger `OnTriggerStay` method in `IntrospectionPanelInteraction` script.

When our `IntrospectionPanelInteraction` script starts, we set our GraphQuery URL, canvas to display a result as well as canvas content:

```c#
    void Start()
    {
        if (UIManager.Instance)
        {
            UIManager.Instance.graphQLCanvas = canvas;
        }

	    GraphQuery.url = UIManager.Instance.graphQLEndpoint;

        fp = FindObjectOfType<FirstPersonAIO>();
        content = canvas.GetComponent<UICanvas>().Content;
    }
```


So when we are within Collider borders, `OnTriggerStay` function is running.

```c#

    private void OnTriggerStay(Collider other)
    {
        if (!canvas.activeSelf)
        {
            canvas.SetActive(true);
            runIntrospectionQuery();
        }
        InteractionController.Instance.disableInteraction(fp);
    }
```

query execution looks like this:

```c#
    void runIntrospectionQuery()
    {
        Debug.Log("Query");
	  GraphQuery.onQueryComplete += DisplayResult;
	  GraphQuery.POST(introspectionQuery);
	    
    }
```

the query itself is defined as a string public variable and is visible in the editor:

![](https://thepracticaldev.s3.amazonaws.com/i/0maz2tpccfo6f79k29rk.png)


The final `IntrospectionPanelInteraction` script looks like this:

```c#
using System.Collections;
using System.Collections.Generic;
using graphQLClient;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using UnityEngine;
using UnityEngine.UI;

public class IntrospectionPanelInteraction : MonoBehaviour
{

	[Tooltip("This is the query call that gives me introspection details)]
	[TextArea]
	public string introspectionQuery;
	
    public GameObject canvas;
    private FirstPersonAIO fp;
    private Text content;
    void Start()
    {
        if (UIManager.Instance)
        {
            UIManager.Instance.graphQLCanvas = canvas;
        }

	    GraphQuery.url = UIManager.Instance.graphQLEndpoint;

        fp = FindObjectOfType<FirstPersonAIO>();
        content = canvas.GetComponent<UICanvas>().Content;
    }
    // Start is called before the first frame update
    private void OnTriggerStay(Collider other)
    {
        if (!canvas.activeSelf)
        {
            canvas.SetActive(true);
            runIntrospectionQuery();
        }
        InteractionController.Instance.disableInteraction(fp);
    }
    
    private void OnTriggerExit(Collider other)
    {
        if (canvas.activeSelf)
        {
            canvas.SetActive(false);
            InteractionController.Instance.enableInteraction(fp);
        }
    }

    void runIntrospectionQuery()
    {
        Debug.Log("Query");
	    GraphQuery.onQueryComplete += DisplayResult;
	    GraphQuery.POST(introspectionQuery);
	    
    }

	public void DisplayResult()
	{
		string data = ParseData(GraphQuery.queryReturn, "__schema");
		canvas.gameObject.GetComponentInChildren<ScrollRect>().normalizedPosition = new Vector2(0, 1);
		Debug.Log(data);
		content.text = data;
	}

	void OnDisable()
	{
		GraphQuery.onQueryComplete -= DisplayResult;
	}

	string ParseData(string query, string queryName){
		JObject obj = JsonConvert.DeserializeObject<JObject>(query);
		return JsonConvert.SerializeObject(obj["data"][queryName], Formatting.Indented);
	}

}

``` 

# Summary

As you can imagine this is a very simple example and it's me just trying out GraphQL in Unity engine. Also, it's a long way to go to get subscriptions, live queries etc. I am experimenting and I would love to see what use case for GraphQL in Unity3d or Unreal engine will be. I can see it really useful for things like leaderboards, high scores, in-app purchases, in-game ads, etc.

Please let me know on Twitter what GraphQL usage you see in Unity3d.