Gatsby React 查询 GraphQL

Question

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

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

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

通常我会使用 React Context API 来跨组件存储获取的数据，但我一直在阅读 here 可以在构建时和运行时触发查询/em>。但是在their example 中，他们使用 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 服务器获取数据？任何 cmets 都表示赞赏。

Answer 1

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

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