如何通过getServerSideProps获取并传递多组Sanity数据

getServerSideProps 是服务端执行的异步函数，单个函数内可发起任意多次Sanity GROQ查询，只需将所有查询结果汇总到返回的props对象中，即可一次性传递给页面组件，无需定义多个同名方法。

代码实现 #

如果多个查询之间没有参数依赖，推荐使用Promise.all并行发起请求，减少整体查询耗时。

修改pages/members.tsx #

export const getServerSideProps = async (context) => {
  // 定义所有需要的GROQ查询语句
  const membersQuery = `*[ _type == "teammembers"] {
    _id,
    name,
    position,
    bordercolor,
    memberimage,
  }`;

  const projectQuery = `*[_type == "projectschema" && slug.current == $id][0] {
    _id,
    title,
    categories[0] -> {
      title,
    },
    date,
    website,
    thumbnail,
    client,
    company,
    description,
  }`;

  // 剩余3组查询按照上述格式继续定义即可
  // const xxxQuery = `...`

  // 并行执行所有查询，动态参数作为fetch第二个参数传入
  // 示例中project查询需要的id从路由参数context.params中获取，按你的实际路由字段替换即可
  const [
    members, 
    projectData
    // 剩余查询结果按顺序写在这里
  ] = await Promise.all([
    sanityClient.fetch(membersQuery),
    sanityClient.fetch(projectQuery, { id: context.params?.id })
    // 剩余查询调用按顺序写在这里
  ])

  // 将所有查询结果放入props返回
  return { 
    props: { 
      members,
      projectData
      // 剩余查询结果按顺序放入props
    } 
  };
};

// 页面组件接收所有传入的props
const teammembers = ({ members, projectData }) => {
  return (
    <>
      {/* 将需要的数据逐层传给子组件 */}
      <TeamMembersComponent members={members} projectData={projectData} />
    </>
  );
};

export default teammembers;

修改components/members.tsx #

子组件按需接收父组件传入的props即可使用对应数据：

const TeamMembersComponent = ({ members, projectData }) => {
  return (
    <>
      <MembersContainer members={members} projectData={projectData} />
    </>
  );
};

注意事项：

• 如果查询之间存在依赖（比如后一个查询需要前一个查询的返回结果作为参数），不要用Promise.all，直接按顺序写await串行查询即可
• GROQ查询的动态参数不要直接拼接到查询字符串中，必须作为sanityClient.fetch的第二个参数传入，避免注入风险
• 所有需要传递给前端组件的数据，都必须显式写在getServerSideProps返回的props对象中

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