使用 typescript、react 和 graphql 以正确方式进行查询的问题

Question

excuse me for that probably stupid question but this is my first steps with graphql and react. I try to create component where inside is GraphQL query, and incoming props. Props is a query which should by pass into GraphQL query. I know I do something wrong but I don't know what. I add everything like client with apollo provider into my app component structure. On a main page (index.js) I have simply layout like:

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>
  );
}

then I have component called 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>
    );
  }
}

and last one that more problematic where is query:

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>
    );
  }   
}

In this component above I made query but I don't get results. I'm not sure but is mismatching of version (DOM Rendering), I have a problem to do this correctly together with typescript, react and apollo. I'll happy if any one can show me correct way and example how this should be done. Thank you

Answer 1

I haven't used typescript, but React hooks and GraphQL. So you made the query but you don't get any results? If the query is executed then there should be a result or an error. If it goes that far it could help to download the Apollo-Graphql plugin (to Google Chrome perhaps?).

I would try the query in the graphi-ql playground for example.

Also, variable-name query inside of your query is a bit confusing.

Best, J