ā¤Ninjas Practicing Multidimensionality

    @apollo-elements/hybrids
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.0Ā ā€¢Ā PublicĀ ā€¢Ā Published

    @apollo-elements/hybrids

    Published on npm Published on webcomponents.org ISC License Release

    šŸ‘¾ hybrids GraphQL factories that shoot for the moon šŸš€

    hybrids is a modern, functional, and opinionated UI library based on the web component standards. It sports a refreshing take on ui-as-value. Take a look at the repository and documentation, and this blog post introduction to hybrids

    Apollo Elements hybrids make it easy to add GraphQL to your hybrids components.

    šŸ”Ž Read the Full API Docs šŸ”Ž

    šŸ““ Contents

    šŸ”§ Installation

    Apollo Elements hybrids are distributed through npm, the node package manager. To install a copy of the latest version in your project's node_modules directory, install npm on your system then run the following command in your project's root directory:

    npm install --save @apollo-elements/hybrids

    šŸ‘©ā€šŸš€ Usage

    See our docs on setting up Apollo client so your components can fetch their data.

    This package provides mutation, query, and subscription factories that you can apply to your hybrids definitions.

    ā“ Queries

    Use the query factory to connect your element to the apollo cache:

    query HelloQuery($name: String) {
      hello(name: $name)
    }
    Imports
    import { query, define, html } from '@apollo-elements/hybrids';
    import HelloQuery from './Hello.query.graphql';
    const render = ({ hello }) => html`
      <p>${hello.data?.hello ?? 'Hello'}</p>
    `;
    
    define('hello-element', {
      hello: query(HelloQuery),
      render
    });

    šŸ‘¾ Mutations

    Like queries, you can use the mutation factory.

    mutation Name($name: String!) {
      name(name: $name) {
        name
      }
    }
    Imports
    import { mutation, define, html } from '@apollo-elements/hybrids';
    import UpdateNameMutation from './UpdateName.mutation.graphql';
    const onKeyup = (host, event) => {
      if (event.key === 'Enter')
        host.updateName.mutate({ variables: { name: event.target.value } });
    }
    
    const render = () =>
      html`<input aria-label="Name" placeholder="Name" onkeyup="${onKeyup}"/>`;
    
    define('name-input', {
      updateName: mutation(UpdateNameMutation),
      render,
    });

    šŸ—ž Subscriptions

    Just like query and mutation, use subscription factory.

    subscription {
      news
    }
    Imports
    import { subscription, define, html } from '@apollo-elements/hybrids';
    import NewsSubscription from './News.subscription.graphql';
    const render = ({ news }) => news.error ? html`
      Error! ${news.error.message}
    ` : html`
      Latest News: ${news.data?.news}
    `;
    
    define('subscribing-element', {
      news: subscription(NewsSubscription),
      render
    });

    If you'd like to set up a subscription with an initial value from a query, then update that query's cached value each time the subscription reports new data, pass a subscription document and an updateQuery function with signature (prev: CachedValue, { subscriptionData }): next: CachedValue to the subscribeToMore method on a query element:

    import { subscription, define, html } from '@apollo-elements/hybrids';
    import { gql } from '@apollo/client/core';
    
    import { apolloClient } from '../client'
    
    define('messages-list', {
      messages: query(gql`{ messages }`),
      render({ messages }) {
        const messages = messages.data?.messages ?? [];
        return html`<ul>${messages.map(message => html`<li>${message}</li>`)}</ul>`;
      },
      /** a 'private' property that calls `subscribeToMore` on connect */
      __messagePosted_subscription: {
        connect(host) {
          host.messages.subscribeToMore({
            document: gql`
              subscription {
                messagePosted
              }
            `,
            updateQuery(previous = [], { subscriptionData }) {
              return (
                  !subscriptionData.data ? previous
                : [subscriptionData.data.messagePosted, ...previous]
              );
            }
          });
        }
      }
    });

    šŸ‘·ā€ā™‚ļø Maintainers

    apollo-elements is a community project maintained by Benny Powers.

    Contact me on Codementor

    Install

    npm i @apollo-elements/hybrids

    DownloadsWeekly Downloads

    34

    Version

    4.0.0

    License

    ISC

    Unpacked Size

    83.1 kB

    Total Files

    31

    Last publish

    Collaborators

    • bennyp