1

Spectrum 对模态使用特定模式，我想用 typescript、graphQL 和 graphQL-codegen 生成的钩子来复制这些模式。

现在我目前拥有的：

  • GraphQL 客户端架构
enum ModalType {
  LOGIN,
  SIGNUP,
}

type LoginModalProps{
  loginVal: String!
}

type SignupModalProps{
  signupVal: String!
}

extend type Query {
  openedModal: OpenedModal!
}

union ModalProps = LoginModalProps | SignupModalProps

type OpenedModal {
  modalType: ModalType!
  modalProps: ModalProps!
}
  • GraphQL 查询
export const GET_OPENED_MODAL = gql`
  query OpenedModal{
    openedModal @client{
      modalType,
      modalProps{
        ... on LoginModalProps {
          loginVal
        }
        ... on SignupModalProps {
          signupVal
        }
      }
    }
  }
`;

graphql-codegen 使用上面的代码来生成下面使用的类型安全查询钩子。

import React from 'react';
import LoginModal from '../containers/modals/LoginModal';
import SignupModal from '../containers/modals/SignupModal';
import { 
  useOpenedModalQuery, 
  ModalType, 
  LoginModalProps, 
  SignupModalProps 
} from '../../generated/graphql';

const ModalContainer: React.FC = () => {
  const { data } = useOpenedModalQuery();

  switch(data?.openedModal.modalType){
    case ModalType.Login:
      return <LoginModal {...data?.openedModal.modalProps as LoginModalProps}/>

    case ModalType.Signup:
      return <SignupModal {...data?.openedModal.modalProps as SignupModalProps}/>

    default: 
      return null;
  }
}

export default ModalContainer

给定的模态声明如下所示

import { LoginModalProps } from '../../../generated/graphql';

const LoginModal: React.FC<LoginModalProps> = ({
  loginVal
}) => {

我是这个 typed 和 graphQL 世界的新手，我觉得它可以做得更好——尤其是我必须使用 switch case 语句而不是原始对象。有什么方法可以保持 ModalType 和 ModalPropsType 之间的耦合吗？并且as在 ModalProps 上进行强制转换后代码仍然安全吗？

4

0 回答 0