GraphQL API

The GraphQL endpoint is https://list.worldfloraonline.org/gql.php.

There are many resources on the web about use of GraphQL. It enables self documenting APIs and all the objects and properties available here have been documented. The use of a GraphQL client or IDE are recommended e.g. the GraphiQL plugin for Google Chrome.

You don't need fancy libraries to access the GraphQL end point it and it might be the best approach for embedding the WFO Plant List in your project. Here are some examples of how to use the API with plain JavaScript.

WFO Plant List API Demos

Here are some examples that show how data from the WFO Plant List API can easily be embedded in a web page.

This one file contains all the code needed to access the API and render the examples below. The code is displayed for the first example to give an indication of how it works. For the rest of the examples you can use "view source" to look at it the full working code or view it on GitHub. There are no external library dependencies. The code is heavily commented.

Although these examples are javascript and browser based they should be simple enough to port to other environments.

Examples just demonstrate querying the current taxonomy because that is the most common use case but it is possible to navigate backwards and forwards in time to see how the treatment of a name has changed. It should be possible to recreate the full WFO Plant List functionality as shown in the portal using calls to the API. Indeed that is how the portal version of the Plant List is implemented.

Please show us what you can build with this. Please don't use it to scrape the data as that can be download freely anyway.

GraphQL Utility Function

This is the utility function used by all examples.

    function runGraphQuery(query, variables, giveBack) {
    
        const payload = {
            'query': query,
            'variables': variables
        }
    
        var options = {
            'method': 'POST',
            'contentType': 'application/json',
            'headers': {},
            'body': JSON.stringify(payload)
        };
    
        const response = fetch(graphQlUri, options)
            .then((response) => response.json())
            .then((data) => giveBack(data));
    
        return;
    }

1: Include full name based on WFO ID

This will just look up the WFO ID wfo-0001048766 and render its full name. The WFO ID is hard coded like it was written in by the server.

    let query =
    `query{
        taxonNameById(nameId: "wfo-0001048766"){
        fullNameStringHtml
        }
    }`;
    runGraphQuery(query, {}, (response) => document.getElementById("example-01").innerHTML =
    response.data.taxonNameById.fullNameStringHtml);

Loading ...

2: Include full name and current taxonomic status. Is it a synonym?

Here we extend example #1 to add in the status but fetching the associated taxon.

Loading ...

3: Include full name and accepted name.

Here we extend example #2 to add in the accepted name.

Loading ...

4: Linking.

Probably the most common thing to want to do is link to the WFO portal once we have the name.

Loading ...

5: Filling in a value from lookup.

Often we want to populate a form field with a valid WFO ID. This example uses a simple select list to keep the example as simple as possible. Don't expect it to perform like production code!

Type the first 4+ letters of the name:

Pick name from the list:

Waiting for pick ...

6: Full taxonomic path. Bread crumbs!

Showing the full taxonomic path to a name from a WFO ID, in this case from our example synonym: wfo-0001048766

7: Name and children with synonyms

A common thing to want to do is list the subtaxa of a taxon and their synonyms. This is the current treatment of the genus Astroloma (wfo-4000003485)

    ?: Your suggestion!

    Please drop me an email if the example you are looking for isn't here or you need some help, Roger Hyam