Solid React GraphQL-LD

React components and hooks for building Solid apps with GraphQL-LD, a developer-friendly way to query Linked Data using GraphQL queries.

This package is fully compatible with the React Components for Solid, which means that GraphQL-LD queries will be able to query private resources when you are logged in with Solid.

More details on what kinds of queries you can write can be found in the README of the GraphQL-to-SPARQL repository.

This package makes use of the Comunica query engine using the GraphQL-LD Comunica Solid wrapper.

Installation

$ yarn add solid-react-graphql-ld

or

$ npm install solid-react-graphql-ld

Require

Import any of the available components and hooks

import { GraphQlLdProvider, Query, useQuery } from 'solid-react-graphql-ld';

Usage

Query component

Using the GraphQlLdProvider and Query components, you can execute queries and render its results within a custom UI.

The GraphQlLdProvider component will create a reusable query engine that is available for consumption by one or more Query components.

The Query component uses the internal query engine to execute a query, and render the results.

Example:

import gql from "graphql-tag";

<GraphQlLdProvider sources={[ 'https://www.rubensworks.net/' ]}>
  <Query
    query={gql`query @single(scope: all) {
      name
      image
      friends @plural {
        id
      }
    }`}
  >
    {({ loading, error, data }) => {
      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error :(</p>;
      return (
        <dl>
          <dt>Full name</dt>
          <dd>{data.name}</dd>
          <dt>Image</dt>
          <dd><img src={data.image} alt={data.name} width="100px" /></dd>
          <dt>Friends</dt>
          <dd>
            <ul>
              {
                data.friends && data.friends.map(friend =>
                  <li key={friend.id}>{friend.id}</li>)
              }
            </ul>
          </dd>
        </dl>
      );
    }}
  </Query>
</GraphQlLdProvider>

GraphQlLdProvider props:

Either client and children, or sources and children are required.

| Field | Type | Description | | ----- | ---- | ----------- | | children | (result: QueryResult) => React.ReactNode | A function returning the UI you want to render based on your query result. (Required) | | client | QueryEngine | A GraphQL-LD query engine. (Either this or sources is required.) | | sources | string[] | An array of URLs to query from. (Either this or client is required.) | | context | object | string | any[] | A JSON-LD context, which can be either a local object or an URL. Defaults to @solid/context. (Only used with sources) | | baseIri | baseIri | The baseIRI using which the query will be parsed and resolved. (Only used with sources) |

Query props:

Only query and children are required.

| Field | Type | Description | | ----- | ---- | ----------- | | children | (result: QueryResult) => React.ReactNode | A function returning the UI you want to render based on your query result. (Required) | | query | string | DocumentNode | A GraphQL query string or document parsed into an AST by graphql-tag. (Required) | | variables | { [key: string]: any } | An object containing all of the variables your query needs to execute. | | queryEngineOptions | any | Optional query engine options to pass to the internal query engine. |

Query hook

With the useQuery hook, you can create your own React components. Have a look at the implementation of the Query component on how this hook can be used.

Example

export function MyComponent() {
  // Only the query prop is required
  const result = useQuery({ query: '{ name @single }', variables: {}, queryEngineOptions: {} });
  return <span>My name is is {result.data.name}.</span>;
}

License

This software is written by Ruben Taelman.

This code is released under the MIT license.