Gatsby React 查询 GraphQL

Question

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

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

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

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

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';

          }

    </FeaturedEstates>

    <ServicesItems /> 

  </Layout>

)

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

Answer 1

您将无法在生产环境中访问 Gatsby 的商店。作为静态站点生成器，它会生成静态文件 :)如果您确实需要在运行时进行实时数据交互，您将需要像常规反应应用程序一样查询实时服务器。