如何在React应用中通过POST调用MS Graph Search API并过滤SharePoint列表

以下是在React应用中调用MS Graph Search API，针对SharePoint列表项进行过滤的实现示例，前提是你已经完成应用注册并配置了Sites.Read.All委托权限：

方式一：使用Microsoft Graph Toolkit (MGT) React组件 #

MGT封装了Graph API调用逻辑，能简化开发流程：

1. 安装依赖：

npm install @microsoft/mgt-react @microsoft/mgt-msal2-provider

2. 配置MSAL2授权提供者（在应用入口文件如App.js中）：

import { Providers } from '@microsoft/mgt-element';
import { Msal2Provider } from '@microsoft/mgt-msal2-provider';

Providers.globalProvider = new Msal2Provider({
  clientId: '你的应用注册Client ID',
  scopes: ['Sites.Read.All']
});

3. 调用Search API并过滤列表项：

import { useEffect, useState } from 'react';
import { Graph } from '@microsoft/mgt-element';

function SharePointListSearch() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const fetchListItems = async () => {
      try {
        const response = await Graph.api('/search/query').post({
          requests: [
            {
              entityTypes: ['listItem'],
              query: {
                // 示例：搜索含"contoso"的项，可追加站点/列表过滤条件
                queryString: 'contoso AND siteId: "你的SharePoint站点ID" AND listId: "你的列表ID"'
              },
              // 可选：指定返回的字段，减少数据量
              fields: ['title', 'createdDateTime', 'webUrl']
            }
          ]
        });
        setItems(response.value[0].hitsContainers[0].hits);
      } catch (error) {
        console.error('调用Graph API失败:', error);
      }
    };

    fetchListItems();
  }, []);

  return (
    <div>
      <h3>SharePoint列表搜索结果</h3>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            <a href={item.resource.webUrl} target="_blank" rel="noopener noreferrer">
              {item.resource.title}
            </a>
            <p>创建时间: {new Date(item.resource.createdDateTime).toLocaleString()}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default SharePointListSearch;

方式二：使用原生Fetch API #

若不想依赖第三方库，可直接通过Fetch结合MSAL获取的Token调用：

import { useEffect, useState } from 'react';

function SharePointListSearch() {
  const [items, setItems] = useState([]);
  // 实际项目中需从MSAL登录状态中动态获取accessToken
  const accessToken = '你的MSAL访问Token';

  useEffect(() => {
    const fetchListItems = async () => {
      const url = 'https://graph.microsoft.com/v2.0/search/query';
      const payload = {
        requests: [
          {
            entityTypes: ['listItem'],
            query: {
              queryString: 'contoso' // 基础搜索，可扩展过滤条件
            }
          }
        ]
      };

      try {
        const response = await fetch(url, {
          method: 'POST',
          headers: {
            'Authorization': `Bearer ${accessToken}`,
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(payload)
        });

        if (!response.ok) {
          throw new Error(`请求失败，状态码: ${response.status}`);
        }

        const data = await response.json();
        setItems(data.value[0].hitsContainers[0].hits);
      } catch (error) {
        console.error('调用Graph API失败:', error);
      }
    };

    accessToken && fetchListItems();
  }, [accessToken]);

  return (
    <div>
      <h3>SharePoint列表搜索结果</h3>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            <a href={item.resource.webUrl} target="_blank" rel="noopener noreferrer">
              {item.resource.title}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default SharePointListSearch;

过滤规则扩展 #

• 针对特定站点+列表过滤：在queryString中追加条件，格式为siteId: "站点ID" AND listId: "列表ID"
• 按字段值筛选：支持OData语法，比如createdDateTime>2024-01-01、status:"已完成"

内容的提问来源于stack exchange，提问作者Sonu