如何在基于queryString参数的Gatsby中执行自定义/动态排序？

import React, { useEffect, useState } from "react";
import { useLocation } from "@reach/router";
import qs from "qs";

const MyComponent = ({ data }) => {
  const location = useLocation();
  const [sortedData, setSortedData] = useState(data);

  useEffect(() => {
    const queryParams = qs.parse(location.search, { ignoreQueryPrefix: true });
    const { sortBy } = queryParams;

    if (sortBy) {
      const sorted = [...data].sort((a, b) => {
        // 根据需要进行排序逻辑的实现
        // 这里只是一个示例，你可以根据自己的需求进行修改
        if (a[sortBy] < b[sortBy]) {
          return -1;
        }
        if (a[sortBy] > b[sortBy]) {
          return 1;
        }
        return 0;
      });

      setSortedData(sorted);
    } else {
      setSortedData(data);
    }
  }, [location.search, data]);

  return (
    <div>
      {/* 在这里使用排序后的数据进行渲染 */}
      {sortedData.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

export default MyComponent;