If you have a graphql backend, you can use graphql property of config to define graphql mutations and queries. For example

import { createStar } from 'redux-nakshatra';
import { take, put } from 'redux-saga/effects';
import gql from 'graphql-tag';
import { apolloClient } from '../store/apolloClient';

export const { types, actions, rootReducer, rootSaga } = createStar({
  name: 'blogItem',
  log: true,
  graphql: {
    client: apolloClient,
    add: {
      getBlogItems: {
        query: gql`
          query {
            allBlogItems {
              id
              title
              author
              image
            }
          }
        `
      },
      getBlogItem: {},
      createBlogItem: {},
      updateBlogItem: {},
      removeBlogItem: {}
    }
  },
  reducer: function(state, action) {
    switch (action.type) {
      case types.updateBlogItem_SUCCESS: {
        const updatedIndex = state.getBlogItems.data.allBlogItems.findIndex(obj => action.response.data.updateBlogItem.id === obj.id);
        const newAllBlogItems = [...state.getBlogItems.data.allBlogItems];
        newAllBlogItems[updatedIndex] = action.response.data.updateBlogItem;
        const newGetBlogItems = {
          data: {
            allBlogItems: newAllBlogItems
          }
        };
        return {
          ...state,
          getBlogItems: {
            ...newGetBlogItems
          }
        };
      }
      case types.createBlogItem_SUCCESS: {
        const newAllBlogItems = [...state.getBlogItems.data.allBlogItems, action.response.data.createBlogItem];
        const newGetBlogItems = {
          data: {
            allBlogItems: newAllBlogItems
          }
        };
        return {
          ...state,
          getBlogItems: {
            ...newGetBlogItems
          }
        };
      }
      default:
        return state;
    }
  }
});

How to invoke mutations

You can pass in mutation graphql query through the actions that are generated. For example for the createBlogItem action that is generated you can invoke it as follows

const length = (this.props.blogItems.getBlogItems.data.allBlogItems && this.props.blogItems.getBlogItems.data.allBlogItems.length) || 0;
this.props.actions.createBlogItem({
  variables: {
    title: faker.lorem.words(),
    author: faker.name.findName(),
    author_image: faker.image.avatar(),
    release_date: faker.date.recent(),
    image: faker.image.nature(),
    short_description: faker.lorem.sentence(),
    long_description: faker.lorem.paragraphs(),
    id: length
  },
  mutation: gql`
    mutation createBlogItem(
      $title: String!
      $author: String!
      $author_image: String!
      $release_date: String!
      $image: String!
      $short_description: String!
      $long_description: String!
      $id: ID!
    ) {
      createBlogItem(
        title: $title
        author: $author
        author_image: $author_image
        release_date: $release_date
        image: $image
        short_description: $short_description
        long_description: $long_description
        id: $id
      ) {
        id
        title
        author
        author_image
        release_date
        image
        short_description
        long_description
      }
    }
  `
});

results matching ""

    No results matching ""