Переменные запроса ReactJS
Не уверен, что делаю неправильно, но после нажатия кнопки отправки получаю следующее сообщение об ошибке:
TypeError: this.props.ObjectQuery не является функцией
Код для запроса следующий:
const ObjectQuery = gql`
query($timestamp: Float!){
action(timestamp: $timestamp){
action
timestamp
object{
filename
}
}
}
`;
class UserList extends React.Component {
render() {
return (
({ loading, error, data }) => {
if (loading) return <p>Loading...</p>;
if (error) {
console.info(error);
return <p>Error</p>;
}
if (data.action.length === 0) return <div>No Objects</div>;
return (//this code binds the query above to the output and puts it on the screen.
<Item.Group divided>
{data.action.map(action => (
<div>
<ul>
<li key = {action.action}>{action.action}</li>
<li key = {action.timestamp}>{action.timestamp}</li>
<ul>
{action.object.map((obj) => {
return (<li>{obj.filename}</li>)
})}
</ul>
</ul>
</div>
))}
</Item.Group>
);
}
)};
}
export default graphql(ObjectQuery, {
options: (props) => ({variables: {timestamp: props.timestamp}})
})(UserList);
Это код для кнопки отправки. Кроме того, по какой-то причине оператор импорта неактивен.
import ObjectQuery from '../UserList';
handleSubmit(event) {
event.preventDefault();
console.info(this.state)
this.setState({ inputValue: new Date(document.getElementById("time").value ).valueOf() });
this.props.ObjectQuery({
variables:{
timestamp: this.state.inputValue
},
});
}
добавлен тег graphql, поскольку он связан с конкретными проблемами GraphQL
Ответы 1
Во-первых, вы не создавали ObjectQuery как функцию. Вы инициализировали его как константу.
const ObjectQuery = gql`
query($timestamp: Float!){
action(timestamp: $timestamp){
action
timestamp
object{
filename
}
}
}`;
Если вы хотите, чтобы это была функция, создайте ее как функцию. Вы также можете использовать его в других компонентах, экспортировав его. Вы можете экспортировать функцию, добавив export
export function ObjectQuery() {
gql`
query($timestamp: Float!){
action(timestamp: $timestamp){
action
timestamp
object{
filename
}
}
}
`;
}
Кроме того, this.props.ObjectQuery недействителен, поскольку вы не добавляли его в компонент. Но, увидев, что вы импортировали ObjectQuery, теперь вы можете использовать его как функцию.
this.setState({ inputValue: new Date(document.getElementById("time").value).valueOf() });
ObjectQuery({ // no this.props
variables: {
timestamp: this.state.inputValue
},
});
Кстати, если оба файла находятся в одной папке, вы можете использовать
import ObjectQuery from './UserList';
Теперь я получаю следующее сообщение об ошибке: > 59 | export default graphql(ObjectQuery, { 60 | options: (props) => ({variables: {timestamp: props.timestamp}}) 61 | })(UserList); 62 |
пробовал этот stackoverflow.com/questions/40643719/… и все равно ничего. Раздражает, когда продукт не работает по документации. Я часами меняю свой код, думая, что делаю что-то не так, а через 5 часов узнал, что это был не я, а ошибка в продукте.
Ага. Это действительно обломная семья. Извините, я не могу вам с этим помочь.
@riyajkhan, какие правки вы внесли? Пытаюсь изучить платформу. Кроме того, когда я пытаюсь использовать @, ваше имя не разрешается.