使用TypeScript，React和GraphQL以正确方式进行make查询的问题

如何解决使用TypeScript，React和GraphQL以正确方式进行make查询的问题

请问这个可能很愚蠢的问题，但这是我使用graphql的第一步，并做出反应。我尝试创建其中GraphQL查询和传入道具的组件。道具是一个查询，应传递给GraphQL查询。我知道我做错了，但我不知道该怎么办。我将像带有apollo provider的客户端之类的所有内容添加到我的应用程序组件结构中。 在主页（index.js）上，我的布局很简单：

import Layout from "../components/layout"
import SearchForm from "../components/searchForm"

export default function Home() {
  return  (
    <Layout pageTitle="React App" headerTitle="Search repositories on Github">
      <SearchForm repositoryNameDefaultValue='' />
    </Layout>
  );
}

然后我有一个名为searchForm的组件：

import { Component,ChangeEvent } from "react";
import Input from "./input";
import Button from "./button";
import style from "./searchForm.module.scss";
import FindRepositoryResults from "./test";

interface IMyComponentErrors {
  repositoryNameError: string;
}

interface IMyComponentProps {
  repositoryNameDefaultValue: string;
}

interface IMyComponentState {
  repositoryName: string;
  formIsSend: boolean;
  errors: IMyComponentErrors;
}

const validateForm = (errors: IMyComponentErrors): boolean => {
  let valid = true;
  Object.values(errors).forEach((val) => val.length > 0 && (valid = false));
  return valid;
};

const validRepositoryNameRegex = RegExp(/^[A-Za-z0-9 _]*[A-Za-z0-9][A-Za-z0-9 _]*$/i);

export default class SignUpFormContainer extends Component<
  IMyComponentProps,IMyComponentState
> {
  constructor(props: IMyComponentProps) {
    super(props);
    this.state = {
      repositoryName: this.props.repositoryNameDefaultValue,formIsSend: false,errors: {
        repositoryNameError: "",}
    };

    this.handleFormSubmit = this.handleFormSubmit.bind(this);
    this.handleClearForm = this.handleClearForm.bind(this);
    this.handleChangeRepositoryName = this.handleChangeRepositoryName.bind(this);
  }

  handleChangeRepositoryName(event: ChangeEvent<HTMLInputElement>): void {
    event.preventDefault();
    const { value } = event.target;
    let errors = this.state.errors;

    if (!validRepositoryNameRegex.test(value)) {
      errors.repositoryNameError = "Invalid repository name";
    } else if (!value) {
      errors.repositoryNameError = "Repository name is required";
    } else {
      errors.repositoryNameError = "";
    }

    this.setState({ errors,repositoryName: value });
  }

  handleClearForm() {
    this.setState({
      repositoryName: "",formIsSend: false
    });
  }

  handleFormSubmit(event) {
    event.preventDefault();
    const { repositoryName } = this.state;
    let errors = this.state.errors;

    if (!repositoryName) {
      errors.repositoryNameError = "Repository name is required";
    }

    this.setState({ errors });

    if (!validateForm(this.state.errors)) {
      return;
    } else {
      this.setState({ formIsSend: true });
    }
  }

  render() {
    const { errors } = this.state;

    return (
      <div>
      { !this.state.formIsSend ? (
      <form
        aria-label="Search repositories by name"
        autoComplete="off"
        onSubmit={this.handleFormSubmit}
        className = {style.formSearchRepository}
      >
        <Input
          type={"text"}
          title={"Repository name:"}
          name={"repositoryName"}
          placeholder={"Enter name of repository"}
          value={this.state.repositoryName}
          error={errors.repositoryNameError.length > 0}
          errorMessage={errors.repositoryNameError}
          onChange={this.handleChangeRepositoryName}
          required
        />
        <Button
          onClick={this.handleFormSubmit}
          title={"Search repository in Github by name"}
          children={"Search"}
        />
      </form>
      ) : <FindRepositoryResults repositoryName={this.state.repositoryName}/>}
      </div>
    );
  }
}

最后一个更麻烦的地方是查询：

import React from "react";
import { gql,useQuery } from "@apollo/client";

const SEARCH_REPOSITORY = gql`
query findRepositories($query: String!) {
    search(first: 10,query: $query,type: REPOSITORY) {
        nodes {
          ... on Repository {
            name,owner {
              login
            }
            primaryLanguage {
              name
            },stargazers {
              totalCount
            },stargazerCount,languages(first: 20,orderBy: {field: SIZE,direction: ASC} ) {
              totalCount
              nodes {
                name
              }
            },issues {
              totalCount
            }
            shortDescriptionHTML,updatedAt,watchers {
              totalCount
            }
          }
        }
    }
}
`;

interface IFindRepositoryComponentProps {
  repositoryName: string;
}

interface IFindRepositoryComponentState {
  detailsAreOpen: boolean;
}

interface RepositoryData {
  data: any;
}

interface RepositoryVars {
  query: string;
}

export default class FindRepositoryResults extends React.Component<IFindRepositoryComponentProps,IFindRepositoryComponentState> {
  constructor(props: IFindRepositoryComponentProps) {
    super(props);
    this.state = { detailsAreOpen: false };

    this.showDetails = this.showDetails.bind(this);
  }

  showDetails() {
    this.setState(state => ({
      detailsAreOpen: !state.detailsAreOpen
    }));
  }

  render() {
    const { loading,data,error } = useQuery<any,RepositoryVars>(
      SEARCH_REPOSITORY,{ variables: { query: this.props.repositoryName } }
    );

    return (
      <section>
        <h3>Results</h3>
        {loading ? (
          <p>Loading ...</p>
        ) : error ? (<p>Error {error}</p>) : (
          <div>
            { data.search.nodes.length == 0 ? (<p>No results found.</p>) : data && data.search.nodes.map((repo) => (
              <div>
                <p>Name: {repo.name}</p>
                <p>Owner: {repo.owner.login}</p>
                <p>Number of stars (total): {repo.stargazerCount}</p>
                <p>Primary language: {repo.primaryLanguage.name}</p>
          
                <button onClick={this.showDetails}>{this.state.detailsAreOpen ? 'Show less' : 'Show more'}</button>
                <div>
                  Details:
                  {repo.issues.totalCount}
                  {repo.languages.totalCount}
                  {repo.shortDescriptionHTML}
                  {repo.stargazers.totalCount}
                  {repo.updatedAt}
                  {repo.watchers.totalCount}
                </div>
              </div>
            ))}
          </div>
        )}
      </section>
    );
  }   
}

在上面的这个组件中，我进行了查询，但没有得到结果。我不确定，但是版本不匹配（DOM渲染），我很难与Typescript，react和apollo一起正确执行此操作。如果有人可以向我展示正确的方法和示例，我将很高兴。谢谢

解决方法

我没有使用打字稿，但是使用了React钩子和GraphQL。所以您进行了查询，但没有得到任何结果？如果执行查询，则应该有结果或错误。如果进展顺利，则可以帮助下载Apollo-Graphql插件（也许到Google Chrome浏览器？）。

例如，我将在graphi-ql游乐场中尝试查询。

此外，查询中的变量名查询有点令人困惑。

最佳，J