react-apollo-notifications

Notification component that takes a GraphQL subscription query

Install

npm install --save react-apollo-notifications

Usage

• Clone apollo-subscription-server to set up an apollo server with subscriptions
• npm install --save react-apollo-notifications to your react project
• Calling Notifications

import React from 'react';
import DemoApp from "./DemoApp";

// GraphQL boilerplate imports
import gql from 'graphql-tag';
import { split } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { ApolloClient } from 'apollo-client';
import { ApolloProvider } from 'react-apollo';
import { WebSocketLink } from 'apollo-link-ws';
import { getMainDefinition } from 'apollo-utilities';
import { InMemoryCache } from 'apollo-cache-inmemory';

import { Notifications } from 'react-apollo-notifications';

const NS = gql`
  subscription {
    subscribeToNotifications{
      message
      date
    }
  }
`;

export default function App() {
  const uri = 'ws://localhost:4000/graphql';

  // Create an http link:
  const httpLink = new HttpLink({ uri });

  // Create a WebSocket link:
  const wsLink = new WebSocketLink({
    uri,
    options: {
      reconnect: true
    }
  });

  const link = split(
    ({ query }) => {
      const definition = getMainDefinition(query);
      return (
        definition.kind === 'OperationDefinition' &&
        definition.operation === 'subscription'
      );
    },
    wsLink,
    httpLink,
  );

  const cache = new InMemoryCache();
  const client = new ApolloClient({ link, cache });

  return (
    <ApolloProvider client={client}>
      <DemoApp />
      <Notifications 
        subscription={NS} 
        titleProperty='title' 
        messageProperty='message' 
      />
    </ApolloProvider>
  )

}

Notes

• Click here for example
• react-apollo-notifications makes use of react-notifications-component so the props are identical

Props Details

| Name | Type | Options | Default | | ------------- |:-------------:|:---------------|:---------:| | subscription (required) | any | gql(subscription_query) | none (required) | | titleProperty | string | (property on graphql query) | if not specified 'Alert' will be there| | messageProperty (required) | string | (property on graphql query) | | | duration | number |(in milliseconds) | 4000 | | notificationStyle | NotificationStyle | | | | notificationStyle.position | string | 'top-left' 'top-right', 'top-center', 'bottom-left','bottom-right' 'bottom-center' | 'top-right' | | NotificationStyle.type | string | 'success', 'danger', 'info', 'default', 'warning' | 'info' | | NotificationStyle.animationIn | string | Any animate.css class Options Here! | 'fadeInRight' | | NotificationStyle.animationOut | string | Any animate.css class Options Here! | 'fadeOut' |

Roadmap

• Custom Component
• More flexibility to default component
  • Onclick event
  • Custom background and text color

License

MIT © Dominic Crofoot