Gatsby React 查询 GraphQL

Question

我正在尝试帮助一个正在构建结合Gatsby和Strapi的网站的朋友。 我对两者都没有经验......

它的前端是用 React 制作的，它用GraphQL调用后端。

他有两个组件： <EstateSearch>和<FeaturedEstates> 。 <EstateSearch>应该从后端获取数据，然后对其进行过滤并合成<FeaturedEstates>组件。

通常我会使用 React Context API 跨组件存储获取的数据，但我在这里读到查询可以在构建时和运行时触发。 但是在他们的示例中，他们使用 Axios 库从外部而不是从后端获取数据。

代码

EstateSearch.js

import React, { useRef, useState } from "react";
import { graphql } from 'gatsby';
import './style.scss';

export const query = graphql`
  query inmuebles {
    allStrapiInmuebles(filter: {dormitorios: { eq: 2}}) {
      edges {
        node {
          id
          nombre
        }
      }
    }
  }
`;

const EstateSearch = props => {
  const [ isRent, setIsRent ] = useState(true);
  const [ isSale, setIsSale ] = useState(false);
  const state = useRef('');
  const [ cities, setCities  ] = useState([]);
  const city = useRef('');
  const zone = useRef('');
  const rooms = useRef(0);
  const bathrooms = useRef(0);
  const priceFrom = useRef(0);
  const priceTo = useRef(0);

  console.log(props.data);

  return (
    <div className="estateSearch">
      <h3>Estate Search</h3>
      <form onSubmit={submitForm}>
        <button
          type="button"
          className={`rentButton ${!!isRent ? 'activeButton' : ''}`}
          onClick={e => handleButton('rent')}
        >Alquiler</button>
        <button
          type="button"
          className={`saleButton ${!!isSale ? 'activeButton' : ''}`}
          onClick={e => handleButton('sale')}
        >Venta</button>

        <select className="city" ref={zone}>
          ...
        </select>

        <select className="city">
          <option value="" >Lorem</option>
          <option value="">Ipsum</option>
        </select>

        <select name="city" className="city" ref={city}>
          <option value="" >City</option>
          <option value="">Lorem</option>
        </select>

        <div className="rooms">
          <input type="number" name="rooms" min="0" placeholder="Rooms" ref={rooms} />
        </div>
        <div className="bathroom">
          <input type="number" name="bathroom" min="0" placeholder="Bathrooms" ref={bathrooms} />
        </div>
        <div className="priceFrom">
          <input type="number" name="priceFrom" min="0" placeholder="Price from" ref={priceFrom} />
        </div>
        <div className="priceTo">
          <input type="number" name="priceTo" min="0" placeholder="Price to" ref={priceTo} />
        </div>
        <div className="search">
          <input type="submit" value="Search" className="search" />
        </div>
      </form>
    </div>
  );

  function handleButton(type) {
    if (type === 'rent') {
      setIsRent(true);
      setIsSale(false);
    } else {
      setIsRent(false);
      setIsSale(true);
    }
  }

  function submitForm(e) {

    

    e.preventDefault();
  }
}

export default EstateSearch;

FeaturedEstates.js

import React from 'react'
import { Link, graphql } from 'gatsby'
import Layout from '../components/layout'
import Cover from '../components/Cover'
import FeaturedEstates from '../components/FeaturedEstates/featuredEstates'
import ServicesItems from '../components/ServicesItems/services'
import EstateCard from '../components/EstateCard/estateCard'

const IndexPage = ({ data }) => (
  <Layout>

    <Cover />

    <FeaturedEstates>
      {data.allStrapiInmuebles.edges.map(document => {
          const inmueble = document.node;
          let precio;
          let operacion;
          
          switch (inmueble.operacion) {
            case 'Alquiler':
              precio = `$${inmueble.precioAlquiler}`;
              operacion = inmueble.operacion;
              break;
            case 'Venta':
              precio = `U$S${inmueble.precioVenta}`;
              operacion = inmueble.operacion;
              break;
            default:
              precio = `$${inmueble.precioAlquiler} / U$S${inmueble.precioVenta}`;
              operacion = 'Alquiler / Venta';
          }

          return (
            <li key={document.node.id}>
                  <EstateCard 
                      key={inmueble.id}
                      imagen={inmueble.imagendestacada.publicURL}
                      rooms={inmueble.dormitorios} 
                      bathrooms={inmueble.banios}  
                      garage={inmueble.estacionamiento} 
                      area={inmueble.superficieConstruida}
                      titleBar={inmueble.nombre}
                      estateTipe={inmueble.tipo}
                      transactionTipe={operacion}
                      refCode="0178"
                      priceCard={precio}
                      Button= {<Link to={`/${inmueble.id}`}>Ver Mas</Link>}
                    />
              </li>
          );
      })}  
    </FeaturedEstates>

    <ServicesItems /> 

  </Layout>
)

export default IndexPage;

export const query = graphql`  
query IndexQuery {
  allStrapiInmuebles {
    edges {
      node {
        id
        nombre
        dormitorios
        banios
        superficieConstruida
        operacion
        tipo
        estacionamiento
        precioVenta
        precioAlquiler
        imagendestacada {
          publicURL
        }
      }
    }
  }
}

`

我想无论如何我都必须使用 Context API，但是当某些用户搜索某些内容时，我应该如何从同一个 Gatsby 服务器获取数据？

Answer 1

您将无法在生产环境中访问 Gatsby 的商店。 作为静态站点生成器，它生成静态文件:)

如果您真的需要在运行时进行实时数据交互，您将需要像常规 React 应用程序一样查询实时服务器。