React Apolloクエリの返信後にReduxアクションを返す

Question

React Apolloを使用してデータストア内のすべてのレコードを照会するので、検索フィルタ内で選択肢を作成できます。

私が使用している重要なデータベースモデルはReportです。

A ReportはdoorType、doorWidth、glassとmanufacturerフィールドがあります。明らかにクエリは、私は、アレイを通過し、ちょうどそうのように、選択可能なリストを作るためにユニークなアイテムを取得し、複数のダムのコンポーネントにallReportsを渡している応答現在

..

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 
}) 

このコードかなりではありませんし、少し過度のことです。

私のSidebarFilterコンポーネント内でクエリが返されたときにアクションをディスパッチしたいと思います。ここでクエリがある...

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コンポーネントのコード上で行いますが、ので、私は、ユーザーが戻ってくる必要があるクエリを再実行する必要はありませんストアに保持されますページに

データが更新され、サイドバーを変更する必要がほとんどありません。

graphql関数にはprops引数を使用することをお勧めします。私は、データがownPropsから取られ、ここでアクションがディスパッチされるかもしれないが、データがエラーを起こしているか、ロードされている可能性があり、レンダリングが中断されます。

編集：

問合せ：

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

Answer 1

アポロが既にあなたのためのお店でのクエリ結果（または別のストアをキャッシュするので、あなたがそれらを統合していない場合は、ように私には思えます）、ストアにデータを格納するだけのアクションをディスパッチすることは冗長です。

私があなたの質問を正しく理解していれば、着信データを一度しかフィルタリングせず、その結果をコンポーネントのステートレスな子どもの小道具として送信することを意図しています。 graphql HOCの設定で、propsプロパティを使用して正しい軌道に乗っていました。なぜ、ちょうどこのような何かをしない：

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の構造が実際にどのように見えるかに応じて変更する必要があるかもしれません。 datahas some handy props on itを使用して、クエリが読み込まれているかどうか（data.loading）、エラーがあるかどうかを確認できます（data.error）。上記の例では、未定義の小道具をあなたの子供に送信するのを防いでいますが、必要に応じてそれらのプロパティをあなたのロジックに簡単に組み込むことができます。

Answer 2

この回答は質問の特定の問題に対処しますが、質問の結果に基づいてReduxアクションを送信する場所に関するより一般的な質問は不明なままです。まだ、ここではベストプラクティスではないようです。