如何将URL querystring变量动态传递给react中的组合graphql查询？

npm install react-apollo graphql

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { gql } from 'graphql';
import { graphql } from 'react-apollo';

const MyComponent = ({ data }) => {
  const location = useLocation();
  
  useEffect(() => {
    const querystringVariable = new URLSearchParams(location.search).get('variableName');
    
    // 将URL querystring变量传递给GraphQL查询
    data.setQuery({
      variables: {
        variableName: querystringVariable,
      },
    });
  }, [location.search, data]);

  if (data.loading) {
    return <div>Loading...</div>;
  }

  if (data.error) {
    return <div>Error!</div>;
  }

  return (
    <div>
      {/* 在这里使用GraphQL查询的结果 */}
      {data.queryResult.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

const query = gql`
  query MyQuery($variableName: String!) {
    queryResult(variableName: $variableName) {
      id
      name
    }
  }
`;

export default graphql(query)(MyComponent);