Saya bekerja dengan dua titik akhir API. Yang pertama mengembalikan daftar tanggal dalam format string yang datanya tersedia. Tanggal kemudian dapat ditambahkan ke titik akhir kedua dan membuat data tambahan. Di Graphql Playground saya bisa membuat semuanya berfungsi. Di front-end saya memiliki drop-down opsi pilih untuk tanggal, tetapi saya belum dapat menjalankan panggilan API kedua ketika saya mengklik pada tanggal tertentu. Ini pertama kalinya saya menggunakan mutasi graphql dan saya belum bisa mendapatkan permintaan API kedua untuk mengembalikan data apa pun ketika saya memilih tanggal. Terima kasih.

Kode ujung depan:

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
     }

   }
`

Kode ujung belakang:

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)
  }
}
0
Alex Mireles 23 April 2020, 05:27

1 menjawab

Jawaban Terbaik

Ada beberapa masalah dengan fungsi onChange Anda.

Anda menelepon getLayer dua kali? Anda hanya perlu memanggilnya sekali, pada saat yang sama saat Anda menetapkan nilai dropdown. Juga, sejauh yang saya tahu, Anda tidak benar-benar membutuhkan 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;

Jelas, saya mengubah beberapa hal untuk menghilangkan beberapa peringatan editor, tetapi memberikan perhatian khusus pada properti onChange.

Kiat: Anda mungkin mengalami masalah ini karena ekstrim panjang baris tempat Anda menambahkan semua logika ini. Instal ekstensi VS Code "Prettier - Code formatter". Aktifkan format VS Code pada opsi simpan. Keuntungan.

1
davidmwhynot 24 April 2020, 01:22