reactjs - როგორ დავარეკინოთ GraphQL კითხვა Apollo-ს გამოყენებით?

მე მაქვს მარტივი კომპონენტი:

import { FC } from 'react';
import './MyComponent.css';
import { useGetHelloQuery, useSendMailQuery } from '../../generated/queries'

interface MyComponentProps {}

const MyComponent: FC<MyComponentProps> = () => {
  const { data: hello, loading: isLoading } = useGetHelloQuery();
  const { data: sendMail, loading: isMailing } = useSendMailQuery();


  if (isLoading || isMailing) {
    return (
      <div>Loading...</div>
    )
  }

  return (
    <>
      <div className="MyComponent">
        data: {hello?.getHello}
      </div>
    </>
  )
}

export default MyComponent

ეს წყვეტის ფუნქციას ეძახის:

// Apollo server  resolvers
import { Resolvers } from "../generated/resolvers-types"
import * as mail from "./nodemailer"

export const resolvers: Resolvers = {
  Query: {
    getHello() {
      return 'hello'
    },

    sendMail() {
      mail.main()
      return 'qwe'
    }
  },
}

როდესაც useSendMailQuery() ხსნება, ის იყენებს რეზოლვერს, რომელიც იძახებს mail.main() ფუნქციას და აგზავნის ელ.ფოსტას. მე მინდა გამოვიყენო ფუნქცია ელ.ფოსტის გასაგზავნად, არ ვგეგმავ ელ.ფოსტის გაგზავნას კომპონენტის დატვირთვის დროს.

არაფერი წინადადება?

პასუხი #1

პასუხი იყენებს უნაზრო (lazy) კითხვას: https://www.apollographql.com/docs/react/api/react/hooks/#uselazyquery

const [sendMail, { called, loading: isMailing, data }] = useSendMailLazyQuery();


  return (
    <>
      <div className="MyComponent">
        data: {hello?.getHello}
      </div>
      <button onClick={() => sendMail()}>Send mail</button>
    </>
  )