跳到主要内容

Graph API

Graph API Development Server Guide​

Example Queries​

Get Graphs by ID​

{
   Graph(id: 1) {
      id
      name
      nodes: Nodes {
         id
         onCanvasId
         fields
      }
      links: Links {
         id
         onCanvasId
         source
         target
         fields
      }
   }
}

Creating A New Graph​

Creating a graph in dev server is accomplished in 3 separate request in order. The cost of atomicity reduces the complexity of the test API:

  1. Creating a graph

    注意

    Unlike real database, the graph ID here starts with 0. Be careful when using it in conditional. For example, it is not a good idea to do

    return graph.id ? this.update(graph) : this.save(graph);

    Instead, do

    return graph.id == undefined ? this.save(graph) : this.update(graph)
    mutation {
        createGraph(name: "My Graph", created_on:"2024-07-15", last_updated_on: "2024-07-15", user_id: 10000) {
            id
            name
            created_on
            last_updated_on
            user_id
        }
    }

  2. Creating all nodes of the graph

    提示

    We can use some tool that quickly generates the onCanvasId for us

    mutation {
        createManyNode(data: [
            {
                onCanvasId: "3acf79c6-8533-43d9-8ddf-f2f87619f779",
                fields: "{\"name\": \"my source node\"}",
                graph_id: 2,
            },
            {
                onCanvasId: "b2e39487-854f-4416-a56c-ac1ff7484d92"
                fields: "{\"name\": \"my target node\"}",
                graph_id: 2
            }
        ]) {
            id
            onCanvasId
            fields
            graph_id
        }
    }

  3. Creating all links of the graph

    mutation {
        createManyLink(data: [
            {
                onCanvasId: "0a784293-e8a1-4e0d-b1dc-14a53194f1e8",
                source: "3acf79c6-8533-43d9-8ddf-f2f87619f779",
                target: "b2e39487-854f-4416-a56c-ac1ff7484d92",
                fields: "{\"type\": \"my link\"}",
                graph_id: 2,
            }
        ]) {
            id
            onCanvasId
            source
            target
            fields
        }
    }

Updating An Existing Graph​

Updating graph metadata:

信息

Test dev server is backed by json-graphql-server, which doesn't support nested query. Therefore we cannot update nodes and links in one-shot.

mutation {
   updateGraph(
      id: 3,
      name: "My New Graph",
   ) {
      id
      name
      last_updated_on
   }
}

Updating a single node:

mutation {
   updateNode(
      id: 102,
      onCanvasId: "3acf79c6-8533-43d9-8ddf-f2f87619f779",
      fields: "{\"name\": \"my updated node\"}"
   ) {
      id
      onCanvasId
      fields
      graph_id
   }
}

Creating a single node:

备注

When we add a new node to an exiting graph, it's essentially updating the graph

mutation {
   createNode(
      onCanvasId: "4f6228fe-2b6f-49aa-b0a8-da3be27b8de8",
      fields: "{\"name\": \"my new node\"}",
      graph_id: 2
   ) {
      id
      onCanvasId
      fields
      graph_id
   }
}

Updating a single link:

mutation {
   updateLink(
      id: 1001,
      onCanvasId: "0a784293-e8a1-4e0d-b1dc-14a53194f1e8",
      source: "3acf79c6-8533-43d9-8ddf-f2f87619f779",
      target: "b2e39487-854f-4416-a56c-ac1ff7484d92",
      fields: "{\"name\": \"my updated link\"}"
   ) {
      id
      onCanvasId
      source
      target
      fields
      graph_id
   }
}

Creating a single link:

备注

When we connect two existing nodes, it's essentially updating the graph

mutation {
   createLink(
      onCanvasId: "cb7ee059-8356-4bea-a203-a40c518a1863",
      source: "3acf79c6-8533-43d9-8ddf-f2f87619f779",
      target: "b2e39487-854f-4416-a56c-ac1ff7484d92",
      fields: {name: "my new link"},
      graph_id: 2
   ) {
      id
      onCanvasId
      source
      target
      fields
      graph_id
   }
}

Get Graph by ID​

{
    allGraphs(filter: {id : 2}) {
        id
        user_id
        name
        Nodes {
            id
            graph_id
            fields
        }
        Links {
            id
            graph_id
            source
            target
            fields
        }
        created_on
        last_updated_on
    }
{
    "data":{
        "allGraphs":[
            {
                "id":"2",
                "user_id":"10000",
                "name":"My Graph",
                "Nodes":[
                    {
                        "id":"102",
                        "graph_id":"2",
                        "fields":"{\"name\": \"my source node\"}"
                    },
                    {
                        "id":"103",
                        "graph_id":"2",
                        "fields":"{\"name\": \"my target node\"}"
                    }
                ],
                "Links":[
                    {
                        "id":"1001",
                        "graph_id":"2",
                        "source":102,
                        "target":103,
                        "fields":"{\"type\": \"my link\"}"
                    }
                ],
                "created_on":"2024-07-15T00:00:00.000Z",
                "last_updated_on":"2024-07-15T00:00:00.000Z"
            }
        ]
    }
}

Troubleshooting​

When we see an error that is thrown by the API server, we can open up the developer console and double-click the error request printed in red:

Error loading error-query.png

It will open up a GraphiQL user interface in web browser and shows us the error details:

Error loading error-query-response.png