https://github.com/folio-org/folio-graphiql
Serves up GraphiQL for use with FOLIO
https://github.com/folio-org/folio-graphiql
Last synced: about 1 year ago
JSON representation
Serves up GraphiQL for use with FOLIO
- Host: GitHub
- URL: https://github.com/folio-org/folio-graphiql
- Owner: folio-org
- License: apache-2.0
- Created: 2018-06-11T21:38:53.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-10-20T02:52:22.000Z (over 2 years ago)
- Last Synced: 2025-02-09T15:42:47.336Z (over 1 year ago)
- Language: JavaScript
- Size: 874 KB
- Stars: 2
- Watchers: 16
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# folio-graphiql
Copyright (C) 2016-2018 The Open Library Foundation
This software is distributed under the terms of the Apache License,
Version 2.0. See the file "[LICENSE](LICENSE)" for more information.
----
A simple webapp that lets you authenticate to Okapi and use [GraphiQL](https://github.com/graphql/graphiql) to explore its GraphQL endpoint (provided by [mod-graphql](https://github.com/folio-org/mod-graphql)).
Built with [create-react-app](https://github.com/facebook/create-react-app), this is a typical React/Webpack app that requires `nodejs` and `yarn` (or `npm`, probably).
Before running, you must install dependencies:
```
yarn install
```
You can run it on `http://localhost:3000` (or elsewhere if you set an [environment variable](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration)) with:
```
yarn start
```
Or output optimized files to `./build` that you can host on another server:
```
yarn build
```
If you would like to change the default Okapi URL in the login form or the text that first populates GraphiQL's query box, that is currently conspicuously hardcoded in [src/App.js](src/App.js).
## Using `folio-graphiql`
The GraphQL syntax can be a bit verbose and not as intuitive as one might hope. This is best demonstrated by examples.
### Simple usage
To see the titles and alternative titles of many records, set the GraphQL query to:
```
query {
instance_storage_instances {
totalRecords
instances {
id title alternativeTitles
}
}
}
```
When you press the play button, you should see something like:
```
{
"data": {
"instance_storage_instances": {
"totalRecords": 118,
"instances": [
{
"id": "69640328-788e-43fc-9c3c-af39e243f3b7",
"title": "ABA Journal",
"alternativeTitles": []
},
{
"id": "6506b79b-7702-48b2-9774-a1c538fdd34e",
"title": "Nod",
"alternativeTitles": []
},
[...]
```
### Specifying parameters
In many GraphQL calls, you will also want to provide values for parameters: for example you could pass a CQL string called `query` in the previous example to specify which particular records you want to see. Or to fetch information about a single record, you will need to specify its ID as a value for the `instanceId` parameter. To see record `69640328-788e-43fc-9c3c-af39e243f3b7`, set the GraphQL query to:
```
query {
instance_storage_instances_SINGLE(instanceId: "69640328-788e-43fc-9c3c-af39e243f3b7") {
title
}
}
```
When you press the play button, you should see something like:
```
{
"data": {
"instance_storage_instances_SINGLE": {
"title": "ABA Journal"
}
}
}
```
### Using variables
Often, insteaad of hardwiring parameter values into your GraphQL query, you will want to provide them separately, as the values of _variables_ which get plugged into the query. For this to work, you need to declare which variables you're going to use and what their types are, which you do in a parenthesized list after the `query` header. So to run the previous query using a variable, set the GraphQL query to:
```
query ($id:String!) {
instance_storage_instances_SINGLE(instanceId: $id) {
title
}
}
```
And the query variables (at bottom left on the page) to:
```
{
"id": "69640328-788e-43fc-9c3c-af39e243f3b7"
}
```
When you press the play button, you should see the same result as before.