Using GraphQl inside the FilterPage Component

[fadeomar]

we will use the query many times in this component so first we need to import things that we need :

1- import the lodash.flowright to compose all queries to the component
import compose from 'lodash.flowright';

2- import all queries that we need from the query file
import {InitaialFilterQuery, FilterResultQuery } from '../queries';

replace the axios thing in the componentDidMount() with queryInitialFilter

• using destruction to get the passed props to the queries
  • const {Loaction, Price, isRemote, type} = data ;
• after this we should declared the variables in the query bind

• we use two queries ,because of that we should use compose to bind two queries to the component like so :

export default compose(graphql(FilterResultQuery, {
    options: props => {
        return {
            variables: {
                location : props.loaction,
                isRemote : props.isRemote,
                price : props.price,
                type : props.type,
            }
        }
    },
name:"FilterResultQuery"
}),
graphql(InitaialFilterQuery, {name: InitaialFilterQuery}))(BookDetails);