如何使用 Apollo 调用 GraphQL 查询？

Question

I have a simple component:

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

That calls this resolver:

// 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'
    }
  },
}

When the useSendMailQuery() is being resolved it uses the resolver that calls the mail.main() function and sends an email. I want to use a function to send the email, not send the email when the component loads.

Any suggestions?

Answer 1

Answer is using a lazy query: 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>
    </>
  )