您如何根据先前在 Apollo graphql 服务器上的 API 请求的结果从前端提交 API 请求？

Question

我正在使用两个 API 端点。第一个 returns 是可用数据的字符串格式的日期列表。然后可以将日期添加到第二个端点并呈现其他数据。在 Graphql Playground 上，我已经能够完成所有工作。在前端，我有一个日期的 select 选项下拉列表，但是当我单击任何给定日期时，我无法触发第二个 API 调用。这是我第一次使用 graphql 突变，当我 select 约会时，我无法获得对 return 任何数据的第二个 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)
  }
}

Answer 1

您的 onChange 函数存在一些问题。

你调用了两次getLayer？您只需要在设置下拉列表值的同时调用一次。另外，据我所知，你并不真的需要 onSelect.

import * as React from 'react';
import { useState } from 'react';
import { useMutation } from '@apollo/react-hooks';
import gql from 'graphql-tag';

const MAP_LAYER = gql`
    mutation MapLayer($date: String!) {
        mapDate(date: $date) {
            token
            mapid
            name
        }
    }
`;

const ContentWrapper = ({ children }) => <div>{...children}</div>;

const IrriSat: React.FC<any> = ({ data }) => {
    const [option, setOption] = useState((data?.mapDates as any)[0].date!);
    const [getLayer]: any = useMutation(MAP_LAYER);

    return (
        <ContentWrapper>
            <select
                value={option}
                onChange={(e: React.ChangeEvent<HTMLSelectElement>): void => {
                    setOption(e.target.value);
                    getLayer({ variables: { date: e.target.value } });
                }}
            >
                {data?.mapDates?.slice(0, 52).map(res => (
                    <option key={res?.date!} value={res?.date!}>
                        {res?.date}
                    </option>
                ))}
            </select>
        </ContentWrapper>
    );
};

export default IrriSat;

显然，我更改了一些内容以消除一些编辑器警告，但要特别注意 onChange 属性。

提示：您遇到这些问题的原因可能是极端添加所有这些逻辑的行的长度。安装 "Prettier - Code formatter" VS 代码扩展。在保存选项上启用 VS Code 的格式。利润.

您如何根据先前在 Apollo graphql 服务器上的 API 请求的结果从前端提交 API 请求？

How do you submit an API request from the front-end based on the result of a previous API request on an Apollo graphql server?

reactjs

graphql

apollo-server

graphql-mutation