获取getUserLocation不是一个函数

Question

制作一个使用搜索栏从搜索结果中获取特定位置的所有用户的项目。为我的项目使用graphql和react。获取错误，表示getUserlocation不是与POST一起使用的函数http://localhost:3000/graphql400（错误请求）

我肯定我写错了函数，但找不到它的示例。

搜索enu.js

import { useQuery } from "@apollo/client";
import { QUERY_GET_LOCATIONS } from "../util/queries";

export function useUserLocation() {
  const getUserLocation = useQuery(QUERY_GET_LOCATIONS);
  const getLocation = async (location) => {
    try {
      if (!location) {
        throw new Error("No users with that location");
      }
      return await getUserLocation({ variables: { location } });
    } catch (error) {
      console.log(error);
    }
  };
  return getLocation;
}

<代码>查询。js

import { gql } from "@apollo/client";


export const QUERY_GET_LOCATIONS = gql`
  query getUserLocation {
    getUserLocation {
      _id
      username
    }
  }
`;

搜索enu.js

import React, { useState } from "react";
import {
  Jumbotron,
  Container,
  Col,
  Form,
  Button,
  Card,
  CardColumns,
} from "react-bootstrap";

// import Auth from "../utils/auth";
import { QUERY_GET_LOCATIONS } from "../util/queries";
import { useQuery } from "@apollo/client";

const SearchedUsers = () => {
  // create state for holding returned google api data
  const [searchedUsers, setSearchedUsers] = useState([]);
  // create state for holding our search field data
  const [searchInput, setSearchInput] = useState("");
  const { getLocation } = useQuery(QUERY_GET_LOCATIONS);

  // create method to search for books and set state on form submit
  const handleFormSubmit = async (event) => {
    event.preventDefault();

    if (!searchInput) {
      return false;
    }

    try {
      const response = await getLocation(searchInput);

      if (!response.ok) {
        throw new Error("something went wrong!");
      }

      const { items } = await response.json();

      const userData = items.map((user) => ({
        userId: user.id,
        userName: user.userName || ["No user to display"],
      }));

      setSearchedUsers(userData);
      setSearchInput("");
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <>
      <Jumbotron fluid className="text-light bg-dark">
        <Container>
          <h1>Search for Location!</h1>
          <Form onSubmit={handleFormSubmit}>
            <Form.Row>
              <Col xs={12} md={8}>
                <Form.Control
                  name="searchInput"
                  value={searchInput}
                  onChange={(e) => setSearchInput(e.target.value)}
                  type="text"
                  size="lg"
                  placeholder="Search for a location"
                />
              </Col>
              <Col xs={12} md={4}>
                <Button type="submit" variant="success" size="lg">
                  Submit Search
                </Button>
              </Col>
            </Form.Row>
          </Form>
        </Container>
      </Jumbotron>

      <Container>
        <h2>
          {searchedUsers.length
            ? `Viewing ${searchedUsers.length} results:`
            : "Search for a location to begin"}
        </h2>
        <CardColumns>
          {searchedUsers.map((user) => {
            return (
              <Card key={user.userId} border="dark">
                <Card.Body>
                  <Card.Title>{user.userName}</Card.Title>
                  <p className="small">Bio: {user.bio}</p>
                </Card.Body>
              </Card>
            );
          })}
        </CardColumns>
      </Container>
    </>
  );
};

export default SearchedUsers;

Answer 1

嗯，useQuery返回三件事加载，错误

 const {loading, error, data} = useQuery(QUERY_GET_LOCATIONS);

现在您可以使用控制台了。记录（数据）并检查您得到的响应。