我用React制作了一个应用程序【2】【天气应用程序②】

2 年 ago

4 minutes

首先

学习的原因和经过

2020年开始，我决定从零开始转职成为一名工程师，并进入某编程学校学习。入学后我发现很多人从零开始学习Ruby，并且Ruby的工作机会远远不如我想象的少。因此毕业后，我决定转向成为一名前端工程师。我将通过记录React学习的过程来深化我的理解和备忘。

具体的步骤 de

使用ChakraUI显示加载状态并启用暗黑模式。

GraphQL是一种查询语言

「GraphQL」是Facebook开发和提供的Web API查询语言。
它是由查询语言和模式语言构成的Web API规范，正如名字所示，可以向服务器查询数据。GraphQL于2012年由Facebook开发，并在2015年开源。
GraphQL支持各种操作系统，可进行跨平台开发。此外，它还支持多种编程语言，如Java、JavaScript、Ruby等，这也是其特点之一。

GraphQL的优点和缺点是什么？

GraphQL的优点有以下3点。

① 通过较少的请求可以访问多个资源。
② 仅获取最少量的数据。
③ 可以更新API而保留现有的查询。

① 只需少数请求即可访问多个资源

由于不依赖于HTTP结构，可以获取多个页面所需的数据。因此，请求不会被浪费，难以导致性能下降，也不会给服务器带来负担，从而可以降低硬件成本。

仅获取最少量的数据。

GraphQL允许指定获取的数据并发送请求。例如，只需指定姓名和电子邮件地址即可向服务器查询，通过这种方式，可以仅获取所需的数据，避免通信浪费，同时也能提高性能。

只需一种选择即可，以下是中文的翻译：
③ 可以在不破坏现有的查询的情况下更新API。

除非自行删除字段，否则不会破坏查询，这样就不会对客户端行为产生影响，能够保持更新后的请求的稳定性。

GraphQL的缺点有以下两个。

① 由于是新技术，所以信息很少。
② 缓存变得复杂。

① 由于这项技术很新，所以相关信息较少。

由于GraphQL是一个相对较新的规范，因此信息量较少。如果是自学的话，需要在有限的信息中进行学习，所以要掌握它需要一定的时间。

现金变得复杂。

GraphQL的缓存机制不会生成URL，同时响应内容也会发生变化，因此相对复杂。这就使得通过CDN进行负载处理变得困难，并且可能对客户端产生负面影响。

在PlayGround中进行探索并设置参数。

访问天气API，可以看到交互式游乐场正在运行。这里显示的是一个包含许多参数的查询。执行此查询时，将显示包含输入参数的结果数据的响应。在这里使用的参数是name、weather、temperature和wind。

修正后的查询如下。

query {
  getCityByName(name: <Your_City>) {
    name
    weather {
      summary {
        title
        description
      }
      temperature {
        actual
        feelsLike
      }
      wind {
        speed
      }
    }
  }
}

请在”Your_City”的位置输入您所居住的城市或任何其他城市名称。
目前并不使用所有数据，暂时执行查询。

2. 通过ChakraUI配置前端设置

使用 Chakra UI 进行前端设置。

使用npm工具来安装Chakra UI。

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

在根文件（src/index.js）中设置提供者。

import React from 'react'
import ReactDOM from 'react-dom'
import { ChakraProvider, ColorModeScript } from '@chakra-ui/react'
import App from './components/App'

ReactDOM.render(
  <ChakraProvider>
    <ColorModeScript initialColorMode="light" />
    <App />
  </ChakraProvider>,
  document.getElementById('root')
)

创建一个名为Dashboard.js的新组件，在src/components目录下，用于跟踪光明模式和暗黑模式。在最后部分启用该组件。

创建用于切换暗模式的图标按钮。

import React from 'react'
import { VStack, IconButton } from '@chakra-ui/react'

export default function Dashboard ( ) {
return (
  <VSack>
    <IconButton
        aria-label="Toggle Dark Mode"
        m="8"
        size="md"
        alignSelf="flex-end"
      />
  </VStack>
)
}

准备标题和输入框

import React, { useState } from 'react'
import {
  Input,
  VStack,
  HStack,
  IconButton,
  Heading
} from '@chakra-ui/react'
import { FiSearch } from 'react-icons/fi'

export default function Dashboard ( ) {

  const [result, setResult] = useState('')
  const [value, setValue] = useState('')

 return (
<VStack>
      <IconButton
        aria-label="Toggle Dark Mode"
        m="8"
        size="md"
        alignSelf="flex-end"
      />
      <Heading mb="8" size="xl">
        Search your city
      </Heading>
      <HStack>
        <Input
          type="text"
          placeholder="Enter city name"
          value={result}
          onChange={(event) => setResult(event.target.value)}
        />
        <IconButton
          aria-label="Search city button"
          icon={<FiSearch />}
          onClick={() => {
            setValue(result)
            getWeather()
            //Errormessage()
          }}
        >
          Search
        </IconButton>
      </HStack>
</VStack>
)
}

完成输入字段的创建。记录输入字段中的数据到控制台日志，并确认状态是否正常工作。
* 如果发生任何错误，请查看下面的GitHub存储库。

3. 请求的处理 de

为了操作API，需要在应用程序中安装一个用于配置GraphQL的包。
安装以下包。

npm install graphql @apollo/client

就像将ChakraProvider输入App组件一样，也要将处理GraphQL请求的App输入。
将src/components目录中的App.js文件更改如下。

import React from 'react'
import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'
import Dashboard from './Dashboard'

export default function App() {
  const client = new ApolloClient({
    cache: new InMemoryCache(),
    uri: 'https://graphql-weather-api.herokuapp.com/',
  })

  return (
    <ApolloProvider client={client}>
      <Dashboard />
    </ApolloProvider>
  )
}

在这里我们定义了一个常数，并且输入两个参数（缓存和URI）来初始化Apollo客户端。
※ URI参数是默认的API端点，在这里使用，缓存是为了防止应用程序向相同的数据发送不必要的请求。

接下来，创建一个名为Queries.js的新文件。将该文件创建在一个名为src/components/graphql的不同目录中。该文件将存储之前在Playground中创建的查询语句。

import { gql } from '@apollo/client'

export const GET_WEATHER_QUERY = gql`
  query getCityByName($name: String!) {
    getCityByName(name: $name) {
      name
      country
      weather {
        summary {
          title
          description
        }
        temperature {
          actual
          feelsLike
        }
        wind {
          speed
        }
      }
    }
  }

如果要传递城市的名称，请将其传递给输入字段中的 $name。

如果您想详细了解GraphQL的模式类型，请查阅以下文件。

向API端点发送请求并将其响应记录到日志中。
打开Dashboard.js文件，并进行以下更改。

import { useLazyQuery } from '@apollo/client'
import { GET_WEATHER_QUERY } from '../graphql/Queries'

export default function Dashboard ( ) {
  const [getWeather, { loading, data, error }] = useLazyQuery(
    GET_WEATHER_QUERY,
    {
      variables: { name: value },
    }
  )

// Search button for input field
<IconButton
    aria-label="Search city button"
    icon={<FiSearch />}
    onClick={() => {
      setValue(result)
      getWeather()
      }}
 >
    Search
</IconButton>
}

当按钮被点击时，会触发两个事件。其中一个是使用先前定义的setValue()状态和getWeather()函数，通过这些，请求会被发送并获取到响应，然后存储在data变量中。

数值的状态将传递给之前在src/components/graphql/Queries.js文件中定义的name属性。通过执行console.log(data)，您应该能够查看从API端点返回的响应。

4. 使用响应将其显示在前端界面上。

从终点返回的响应是使用之前在data变量中获取的对象，这里需要在前端以精细化的表格形式显示响应。在这里，我们将使用Chakra Ui的Table组件。

当你迷茫时，请参考 Chakra UI 的文档。

导入以下组件。

import {
  Stack,
  Table,
  Tbody,
  Tr,
  Td,
  TableCaption,
  StackDivider,
  HStack,
  Divider,
} from '@chakra-ui/react'

// Dashboard component
<Stack>
        <Divider mt="4" mb="4" borderColor="gray.100" />
        {data && (
          <>
            <VStack
              divider={<StackDivider />}
              borderColor="gray.100"
              borderWidth="2px"
              p="4"
              borderRadius="lg"
              w="100%"
              maxW={{ base: '90vw', sm: '80vw', lg: '50vw', xl: '40vw' }}
              alignItems="stretch"
            >
              <Table variant="simple">
                <TableCaption>
                  Weather in {data.getCityByName.name} right now
                </TableCaption>

                <Tbody>
                  <Tr>
                    <Td>Temperature</Td>

                    <Td textAlign="right">
                      {Math.floor(
                        data.getCityByName.weather.temperature.actual - 273
                      ) + ' '}
                      Deg C
                    </Td>
                  </Tr>
                  <Tr>
                    <Td>Feels like</Td>
                    <Td textAlign="right">
                      {data.getCityByName.weather.summary.description}
                    </Td>
                  </Tr>
                  <Tr>
                    <Td>Wind speed (mph)</Td>

                    <Td textAlign="right">
                      {data.getCityByName.weather.wind.speed + ' '}
                    </Td>
                  </Tr>
                </Tbody>
              </Table>
            </VStack>
          </>
        )}
      </Stack>

最重要的是能够获取来自响应的数据，并且默认情况下，将从响应中返回的开尔文单位通过公式 – 温度（开尔文）-273 = 温度（摄氏度）来转换为摄氏度。

5. 使用ChakraUI显示加载状态并启用暗黑模式。

当编写从GraphQL服务器获取请求的逻辑时，可以利用拆封（destructure）变量loading的状态来判断获取请求的进程是否正在进行中。在这种情况下，可以使用Chakra UI的Spinner组件。

以下是顯示旋轉器的邏輯。

import { spinner } from "@chakra-ui/react" 
// Dashboard.js component
<Stack>
        {loading && (
          <>
            <Spinner
              thickness="4px"
              speed="0.65s"
              emptyColor="gray.200"
              color="blue.500"
              size="xl"
            />
          </>
        )}
</Stack>

使用算子时，只有在读取状态为true的情况下才会显示旋转组件。

那么，让我们启用应用程序的暗黑模式。

转到Dashboard.js文件，使暗模式切换按钮生效。

import { useColorMode } from "@chakra-ui/react
// for the icon to change on toggle - 
// if light: show Moon Icon else show Sun Icon
import { FiMoon, FiSun } from 'react-icons/fi'

const { colorMode, toggleColorMode } = useColorMode()

// toggle button for dark/light mode
<IconButton
        aria-label="Toggle Dark Mode"
        icon={colorMode === 'light' ? <FiMoon /> : <FiSun />}
        m="8"
        size="md"
        alignSelf="flex-end"
        onClick={toggleColorMode}
/>

当用户点击按钮时，toggleColorMode将被调用，这将导致colorMode的状态发生变化，并根据三元运算符来改变图标。现在，可以自由地使用Weather应用程序了。

用于建设项目的资源

请参考以下网站。

使用GraphQL和Chakra UI构建一个天气应用程序
GraphQL是什么？介绍与REST的区别和实施案例

首先