我正在使用两个API端点。第一个以字符串格式返回可用数据的日期列表。然后可以将日期添加到第二个端点并呈现其他数据。在Graphql Playground上,我能够使所有工作正常进行。在前端,我有一个用于日期的选择选项下拉菜单,但是当我单击任何给定日期时,无法启动第二个API调用。这是我第一次使用graphql突变,并且在选择日期时无法获得第二个API请求以返回任何数据。谢谢。
前端代码:
app.tsx
import * as React from 'react'
import { useState } from 'react'
import { useMutation } from '@apollo/react-hooks'
import { IrriSatQuery } from '../../generated/graphql'
import { MAP_LAYER } from './query'
interface Props {
data: IrriSatQuery;
}
const IrriSat: React.FC<Props> = ({ data }) => {
const [option, setOption] = useState((data?.mapDates as any)[0].date!)
const [getLayer] = useMutation(MAP_LAYER)
return (
<>
<ContentWrapper>
<select value={option} onChange={( e: React.ChangeEvent<HTMLSelectElement>, ): void => {setOption(e.target.value, getLayer(e.target.value)}} onSelect={() => getLayer({variables: {type: option}})}>
{data?.mapDates?.slice(0,52).map(res =>
<option key={res?.date!} value={res?.date!}>{res?.date}</option>
)
}
</select>
</ContentWrapper>
</>
)
}
export default IrriSat
query.ts] >>
export const QUERY_IRR_SAT = gql` query IrriSat { mapDates { date dateurl } } ` export const MAP_LAYER = gql` mutation MapLayer($date: String!) { mapDate(date: $date) { token mapid name } } `
后端代码:
server.js
class IrriSatAPI extends RESTDataSource { constructor() { super(); this.baseURL = 'https://irrisat-cloud.appspot.com/_ah/api/irrisat/v1/services/' } async getMapsDates() { const response = await this.get('maps/dates') return Array.isArray(response.items) ? response.items.map(response => this.mapsDatesReducer(response)) : [] } mapsDatesReducer(response) { return { date: response.date, dateurl: response.dateurl, } } async getMapsLayer(date) { const response = await this.get(`maps/layers/${date}`) return Array.isArray(response.items) ? response.items.map(response => this.mapsLayerReducer(response)) : [] } mapsLayerReducer(response) { return { token: response.token, mapid: response.mapid, name: response.name } } } }
schema.js
type MapDates { date: String dateurl: String } type Mutation { mapDate(date: String): [MapsLayers] } type Query { mapDates: [MapDates]
resolver.js
module.exports = {
Query: {
mapDates: (_, __, { dataSources }) => dataSources.irriSatAPI.getMapsDates(),
},
Mutation: {
mapDate: (_, { date }, { dataSources }) => dataSources.irriSatAPI.getMapsLayer(date)
}
}
我正在使用两个API端点。第一个以字符串格式返回可用数据的日期列表。然后可以将日期添加到第二个端点,并显示其他...
onChange
功能存在一些问题。