react-apollo-notifications v0.1.2

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

Roadmap

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

License

MIT © Dominic Crofoot