将变量从输入传递给 GraphQL 搜索调用 [英] Pass variable from input to GraphQL search call
问题描述
我正在学习graphql和react-apollo.我在我的代码中设置了一个搜索查询.我不确定如何将变量从我的代码(即 this.state.search)传递给我的 grapnql 调用.
我看了很多答案，包括 这个，但似乎有点不同.
文档似乎也没有 给出关于如何使用状态作为变量的任何指导.
我的代码如下.
谁能建议如何连接这两者?
import React, { Component} from 'react'从'react-apollo'导入{graphql}从'graphql-tag'导入gql类搜索扩展组件{构造函数(道具){超级(道具)this.state = {搜索: ''}}updateSearch = (e) =>{this.setState({搜索:e.target.value})}submitSearch = (e) =>{e.preventDefault()控制台日志(这个状态)}使成为() {const { 搜索 } = this.state;返回 (<form onSubmit={ this.submitSearch }><输入类型='文本'onChange={ this.updateSearch }值={搜索}占位符='搜索'/></表单>)}}导出默认 graphql(gql`{搜索(查询:曼彻斯特"，类型:团队){名称}}`)(搜索)您至少需要将其拆分为两个组件.一个保存用户搜索内容的状态，然后另一个通过获取道具实际进行查询.此外，如果表单是在未输入任何内容的情况下提交的，您可以让 apollo 高阶组件跳过查询.
import React, {Component} from 'react'从反应阿波罗"导入 {graphql}从'graphql-tag'导入gql类结果扩展组件{使成为() {//apollo 在 data 属性下提供结果const {data} = this.props;返回 {data.search.namej}
}}const ResultsWithQuery = graphql(gql`查询 FindTeam($query: String!) {搜索(查询:$ 查询，类型:团队){名称}}`, {跳过: (ownProps) =>!ownProps.query})(结果);导出类搜索扩展组件{构造函数(道具){超级(道具)this.state = {搜索: ''}}updateSearch = (e) =>{this.setState({搜索:e.target.value})}submitSearch = (e) =>{e.preventDefault()控制台日志(这个状态)}使成为() {const {search} = this.state;返回 (<div><form onSubmit={this.submitSearch}><输入类型='文本'onChange={this.updateSearch}值={搜索}占位符='搜索'/><ResultsWithQuery query={search}/></表单>)}}
* 更新 *现在 react-apollo@2.1 已经发布，有另一种使用渲染道具的方法.
https://www.apollographql.com/docs/react/essentials/get-started.html#request
这简化了您在这种情况下所需的组件数量.
import React, { Component} from 'react'从'react-apollo'导入{查询}从'graphql-tag'导入gqlconst SearchQuery = gql`查询 FindTeam($query: String!) {搜索(查询:$ 查询，类型:团队){名称}}`;导出默认类搜索扩展组件{构造函数(道具){超级(道具)this.state = {搜索: ''}}updateSearch = (e) =>{this.setState({搜索:e.target.value})}submitSearch = (e) =>{e.preventDefault()控制台日志(这个状态)}使成为() {const { 搜索 } = this.state;返回 (<form onSubmit={ this.submitSearch }><输入类型='文本'onChange={ this.updateSearch }值={搜索}占位符='搜索'/><Query query={SearchQuery} skip={!search} variables={{query: search}}>{({加载，错误，数据}) =>{如果(加载)返回空值；如果(错误)抛出错误；返回 {data.search.namej}
}}</查询></表单>)}}I am in the process of learning graphql and react-apollo. I have set up a search query in my code. I am unsure how to pass a variable from my code (i.e. this.state.search) to my grapnql call.
I have looked at many answers including this one, but it seems a bit different.
The docs also don't seem to give any guidance on how to use state as the variable.
My code is below.
Can anyone advise how to connect both of these?
import React, { Component} from 'react'
import { graphql } from 'react-apollo'
import gql from 'graphql-tag'
class Search extends Component {
constructor(props) {
super(props)
this.state = {
search: ''
}
}
updateSearch = (e) => {
this.setState({
search: e.target.value
})
}
submitSearch = (e) => {
e.preventDefault()
console.log(this.state)
}
render() {
const { search } = this.state;
return (
<form onSubmit={ this.submitSearch }>
<input
type='text'
onChange={ this.updateSearch }
value={ search }
placeholder='Search'
/>
</form>
)
}
}
export default graphql(gql`
{
search(query: "Manchester", type: TEAM) {
name
}
}`)(Search)
You'll want to split this up into at least two components. One that holds the state of what the user searched, then another that actually does the querying by getting a prop. Additionally you can have the apollo higher order component skip the query if the form was submitted without entering something.
import React, {Component} from 'react'
import {graphql} from 'react-apollo'
import gql from 'graphql-tag'
class Results extends Component {
render() {
// apollo provides results under the data prop
const {data} = this.props;
return <h1>{data.search.namej}</h1>
}
}
const ResultsWithQuery = graphql(gql`
query FindTeam($query: String!) {
search(query: $query, type: TEAM) {
name
}
}
`, {skip: (ownProps) => !ownProps.query})(Results);
export class Search extends Component {
constructor(props) {
super(props)
this.state = {
search: ''
}
}
updateSearch = (e) => {
this.setState({
search: e.target.value
})
}
submitSearch = (e) => {
e.preventDefault()
console.log(this.state)
}
render() {
const {search} = this.state;
return (
<div>
<form onSubmit={this.submitSearch}>
<input
type='text'
onChange={this.updateSearch}
value={search}
placeholder='Search'
/>
<ResultsWithQuery query={search} />
</form>
</div>
)
}
}
* UPDATE * Now that react-apollo@2.1 has been released there is an alternative way using render props.
https://www.apollographql.com/docs/react/essentials/get-started.html#request
This simplifies the number of components you need in this case.
import React, { Component} from 'react'
import { Query } from 'react-apollo'
import gql from 'graphql-tag'
const SearchQuery = gql`
query FindTeam($query: String!) {
search(query: $query, type: TEAM) {
name
}
}
`;
export default class Search extends Component {
constructor(props) {
super(props)
this.state = {
search: ''
}
}
updateSearch = (e) => {
this.setState({
search: e.target.value
})
}
submitSearch = (e) => {
e.preventDefault()
console.log(this.state)
}
render() {
const { search } = this.state;
return (
<form onSubmit={ this.submitSearch }>
<input
type='text'
onChange={ this.updateSearch }
value={ search }
placeholder='Search'
/>
<Query query={SearchQuery} skip={!search} variables={{query: search}}>
{({loading, error, data}) => {
if (loading) return null;
if (error) throw err;
return <h1>{data.search.namej}</h1>
}}
</Query>
</form>
)
}
}
这篇关于将变量从输入传递给 GraphQL 搜索调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
