AccountPasswordItemList.jsx

'use strict';
import Helmet from 'react-helmet';
import Relay from 'react-relay';
import React, { Component } from 'react';
import PasswordItemForm from './PasswordItemForm.jsx';
import PasswordItemsList from './PasswordItemsList.jsx';
import IntroducePasswordItemMutation from '../mutations/IntroducePasswordItemMutation';

export default Relay.createContainer(
  class AccountPasswordItemList extends Component {
    destroy(id) {

    }
    create(password_item) {
      Relay.Store.commitUpdate(
        new IntroducePasswordItemMutation({ password_item, account: this.props.account }),
        {
          onError: transaction => {
            const error = transaction.getError() || new Error('Mutation failed.');
            console.error(error);
          },
          onSuccess: () => {
            console.log('Mutation successful!');
          }
        }
      );
    }
    render() {
      const { destroy, props, create } = this;
      const { intl, account } = props;
      console.log(account.password_items.edges[0].node);
      return <div>
        <Helmet title={intl.formatMessage({ id: 'passwords_title', defaultMessage: 'Passwords' })}/>
        {/*<PasswordItemsList password_items={account.password_items.edges.map(({node}) => node)} destroy={destroy}/>*/}
        <PasswordItemForm item={{}} save={create.bind(this)}/>
      </div>;
    }
  },
  {
    prepareVariables() {
      return {
        limit: -1 >>> 1
      };
    },
    fragments: {
      account: () => Relay.QL`
        fragment on Account {
            ... on Node {
                ... on Account {
                    id
                }
            }
            ... on Node {
                ... on Account {
                    name
                }
            }
            password_items(first: 20) {
                edges {
                    node {
                        id
                        title
                        pass
                }
              }
            }
            ${IntroducePasswordItemMutation.getFragment('account')}
        }
      `
    }
  }
);

IntroducePasswordItemMutation.js

'use strict';
import Relay from 'react-relay';
import { uniqueId } from 'lodash';

export default class IntroducePasswordItemMutation extends Relay.Mutation {
  getMutation() {
    return Relay.QL`mutation {introducePasswordItem(input: $input)}`;
  }
  getVariables() {
    const { account, password_item} = this.props;
    const { pass, title } = password_item;
    return { account_id: account.id, pass, title };
  }

  getFatQuery() {
    return Relay.QL`        
      fragment on IntroducePasswordItemPayload {
          account
          newPasswordItemEdge
      }
    `;
  }
  getConfigs() {
    return [{
      type: 'RANGE_ADD',
      parentName: 'account',
      parentID: this.props.account.id,
      connectionName: 'password_items',
      edgeName: 'newPasswordItemEdge',
      rangeBehaviors: {
        '': 'append'
      }
    }];
  }
  getOptimisticResponse() {
    const { password_item, account } = this.props;
    const { pass, title } = password_item;
    return {
      account: account,
      newPasswordItemEdge: {
        node: {
          id: uniqueId(),
          pass,
          title
        }
      }
    }
  }
}

IntroducePasswordItemMutation.fragments = {
  account: () => Relay.QL`fragment on Account {
      ... on Node {
          ... on Account {
              id
          }
      }
  }`
};

queries.js

import Relay from 'react-relay';

export const account = Component => Relay.QL`
  query AccountQuery($account_id: ID!) {
    account(id: $account_id) {
      ${Component.getFragment('account')}    
    }
  }
`;

routes.js

import { account } from './queries/account';
<Route path="passwords" component={AccountPasswordItemList} queries={{ account }}/>

schema.graphqls

type Account implements Node {
  external_account_id: String!
  name: String!
  login: String!
  email: Email!
  admin: Boolean
  password_items(after: String, first: Int, before: String, last: Int, sort: String, direction: SortOrder): PasswordItemConnection
  created_at: DateTime!
  updated_at: DateTime!
  id: ID!
  globalId: ID!
  node(id: ID!): Node
}

scalar DateTime

scalar Email

input IntroducePasswordItemInput {
  title: String!
  pass: String!
  account_id: ID
  clientMutationId: String!
}

type IntroducePasswordItemPayload {
  account: Account
  newPasswordItemEdge: PasswordItemEdge
  clientMutationId: String!
}

type mutation {
  introducePasswordItem(input: IntroducePasswordItemInput!): IntroducePasswordItemPayload
}

interface Node {
  id: ID!
}

type PageInfo {
  hasNextPage: Boolean!
  hasPreviousPage: Boolean!
  startCursor: String
  endCursor: String
}

type PasswordItem implements Node {
  account_id: Int!
  title: String!
  pass: String!
  created_at: DateTime!
  updated_at: DateTime!
  id: ID!
  globalId: ID!
  node(id: ID!): Node
}

type PasswordItemConnection {
  pageInfo: PageInfo!
  edges: [PasswordItemEdge]
}

type PasswordItemEdge {
  node: PasswordItem
  cursor: String!
}

type Query {
  account(id: ID!): Account
  me: Account
  password_items(after: String, first: Int, before: String, last: Int, sort: String, direction: SortOrder): PasswordItemConnection
  node(id: ID!): Node
}

enum SortOrder {
  ASC
  DESC
  ASC_NULLS_FIRST
  ASC_NULLS_LAST
  DESC_NULLS_FIRST
  DESC_NULLS_LAST
}