如何使用 Apollo 調用 GraphQL 查詢？

Question

我有一個簡單的組件：

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()函數並發送電子郵件。 我想使用一個功能來發送電子郵件，而不是在組件加載時發送電子郵件。

有什么建議么？

Answer 1

答案是使用惰性查詢： 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>
    </>
  )