Реагировать на значение контекста для запроса graphql - PullRequest
Новая
       14

Реагировать на значение контекста для запроса graphql

0 голосов
/ 12 июня 2018

Я использую контекстный API в реагировании для передачи данных дочерним компонентам.У меня проблема в том, что мне нужно выполнить запрос graphql, используя данные, переданные из контекста в качестве переменной.Я создал HOC и успешно смог получить доступ к данным из реквизита внутри функции рендеринга, но я не могу получить доступ к значению в запросе graphql.

context.js 

import React, { Component } from 'react';

export const Context = React.createContext();

export const { Consumer, Provider } = Context;

export const WithContext = (Component) => {
    return (props) => (
        <Consumer>
             {value =>  <Component {...props} data={value} />}
        </Consumer>
    )
}

Component.js 

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { graphql, compose } from 'react-apollo';
import gql from 'graphql-tag';
import { GetMerchantLocations, GetMerchant } from '../../data/queries';
import { Consumer, WithContext } from './context';


class Locations extends Component {

    render(){

        console.log(this.props.data.data);

        return (

            <div className="locations-container">
            <div className="flex grid-header vertical-center">
                <div className="item">
                    <h3>Manage Locations</h3>
                </div>
                <div className="item">
                    <div className="btn">Create Location</div>
                </div>
            </div>

            <div className="table-row table-header grid" style={rowStyle}>
                <div>Location</div>
                <div>Manager</div>
                <div></div>
                <div></div>
            </div>
            <div className="table-body">
            </div>
        </div>
        );
    }
}

export default graphql(GetMerchantLocations, { 
    options: (props) => ({
        variables: {
            id: this.props.data.data.id
        },
    })}
)(WithContext(Locations));

1 Ответ

0 голосов
/ 16 июля 2019

Вы используете неверный контекст при экспорте HOC.

Вы говорите: 

export default graphql(GetMerchantLocations, { 
    options: (props) => ({
        variables: {
            id: this.props.data.data.id
        },
    })}
)(WithContext(Locations));

в опциях вы можете получить доступ к опциям области опций: props.data ...

...