Redux Submit Actions After React Apollo Request Request

I use React Apollo to query all records in my datastore so that I can create variations within the search filter.

An important database model that I use is Report.

A Reporthas fields doorType, doorWidth, glassand manufacturer.

At the moment, when the request is answered, I pass to allReportsseveral dumb components passing through the array and just get unique elements for selecting the list, for example ...

const uniqueItems = []

items.map(i => {
  const current = i[itemType]

  if (typeof current === 'object') {
    if (uniqueItems.filter(o => o.id !== current.id)) {
      return uniqueItems.push(current)
    }
  } else if (!uniqueItems.includes(current)) {
    return uniqueItems.push(current)
  }

  return
})

Obviously this code is not very good and a bit overkill.

I would like to send an action when the request returns in my SidebarFiltercomponents. Here is the request ...

const withData = graphql(REPORT_FILTER_QUERY, {
  options: ({ isPublished }) => ({
    variables: { isPublished }
  })
})

const mapStateToProps = ({
  reportFilter: { isPublished }
  // filterOptions: { doorWidths }
}) => ({
  isAssessment
  // doorWidths
})

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      resetFilter,
      saveFilter,
      setDoorWidths,
      handleDoorWidthSelect
    },
    dispatch
  )

export default compose(connect(mapStateToProps, mapDispatchToProps), withData)(
  Filter
)

Redux setDoorWidths SidebarFilter, , , .

, .

, props graphql. , ownProps, , , .

Edit:

Query:

query ($isPublished: Boolean!){
  allReports(filter:{
    isPublished: $isPublished
  }) {
  id
  oldId
  dbrw
  core
  manufacturer {
    id
    name
  }
  doorWidth
  doorType
  glass
  testBy
  testDate
  testId
  isAssessment
  file {
    url
  }
  }
}
+4
2

, - Redux - . .

+4

, , Apollo ( , ), , .

, , , . graphql HOC. - :

const mapDataToProps = ({ data = {} }) => {
  const items = data
  const uniqueItems = []

  // insert your logic for filtering the data here

  return { uniqueItems } // or whatever you want the prop to be called
}

const withData = graphql(REPORT_FILTER_QUERY, {
  options: ({ isPublished }) => ({
    variables: { isPublished }
  }),
  props: mapDataToProps,
})

, data. data , , (data.loading) (data.error). undefined prop , , .

+2

Source: https://habr.com/ru/post/1681957/


All Articles