AWS Amplify 和 Next.JS with GraphQL Server Error No current user from getStaticPaths

Posted 2023-03-08

【中文标题】AWS Amplify 和 Next.JS with GraphQL Server Error No current user from getStaticPaths

【英文标题】：AWS Amplify and Next.JS with GraphQL Server Error No current user from getStaticPaths

【发布时间】：2021-10-13 18:02:43

【问题描述】：

我无法从 Amplify 的 API Graphql 访问数据，并且一直返回

Server Error
Error: No current user

我一直在关注这个教程：https://youtu.be/13nYLmjZ0Ys?t=2292

我知道我已登录 Amplify，因为如果我进入不同的页面，我可以获取用户身份验证，甚至可以显示 SignOut 按钮。但无论出于何种原因，我不确定为什么会出现此错误

import  API  from "aws-amplify";
import  useRouter  from "next/router";
import  listActivations, getActivation  from "../../graphql/queries";

const Activation = ( activation ) => 
  const router = useRouter();
  if (router.isFallback) 
    return <div>Loading</div>;
  
  return <div>activation.title</div>;
;
export default Activation;

export async function getStaticPaths() 
  const s-s-r = withs-s-rContext();
  console.log("static paths");
  const activationData = await s-s-r.API.graphql(
    query: listActivations,
  );
  console.log("activationData", activationData);
  const paths = activationData.data.listActivations.items.map((activation) => (
    params:  id: activation.id ,
  ));
  return 
    paths,
    fallback: true,
  ;


export async function getStaticProps( params ) 
  const s-s-r = withs-s-rContext(); // added s-s-r, but still getting error
  console.log("static props");
  const  id  = params;
  const activationData = await s-s-r.API.graphql(
    query: getActivation,
    variables:  id ,
  );
  return 
    props: 
      activation: activationData.data.getActivation,
    ,
  ;

出现控制台日志static paths，然后出现错误。

您认为这与我的 GraphQL 架构有关吗？

type User @model @auth(rules: [ allow: owner, ownerField: "username" ]) 
  id: ID!
  username: String!
  email: String!
  userType: UserType


type Activation
  @model
  @key(
    name: "activationsByStudentId"
    fields: ["student"]
    queryField: "activationsByStudentId"
  )
  @auth(
    rules: [
       allow: groups, groups: ["Admin"] 
       allow: owner 
      
        allow: owner
        ownerField: "studentId"
        operations: [create, update, delete]
      
       allow: private, operations: [read] 
       allow: public, operations: [read] 
    ]
  ) 
  id: ID!
  studentId: ID!
  title: String!
  student: Student @connection(fields: ["studentId"])
  teachers: [TeachersActivations] @connection(name: "ActivationTeachers")

编辑：我还添加了用户模型，看看这是否也是一个原因。

【问题讨论】：

我不熟悉 Amplify。无论如何，getStaticProps 与静态生成一起使用，即。它在构建时调用。您可以在运行时登录 Amplify，但不会影响任何静态数据获取。

@Riwen 当然可以，但是“没有当前用户”是什么意思？我什至正在学习 Amplify 本身的教程：docs.amplify.aws/start/getting-started/data-model/q/integration/…

【参考方案1】：

由于getStaticProps 和getStaticPaths 在构建期间被调用，并且在服务器上当fallback 等于true 时，您需要为s-s-r（服务器端渲染）配置Amplify。请务必查看s-s-r Support for AWS Amplify javascript Libraries。

解决方案：首先，为 s-s-r 配置 Amplify：

Amplify.configure( ...awsExports, s-s-r: true );

然后你需要使用withs-s-rContext，并添加authMode参数。正如上面的链接所引用的：

例如，采用由身份提供商（如 Amazon Cognito 用户池、Okto 或 Auth0）支持的 AppSync GraphQL API。某些 GraphQL 类型可能需要对用户进行身份验证才能执行某些请求。使用 API 类，用户身份现在将自动配置并传递到 API 请求标头中：

const s-s-r = withs-s-rContext();
const activationData = await s-s-r.API.graphql(
  query: listActivations,
  authMode: "AMAZON_COGNITO_USER_POOLS"
);

【讨论】：

哎呀，我实际上在我的代码库中添加了它，我只是没有在我的问题上更新它。但即使使用 s-s-r，我也遇到了问题

请务必更新问题中的代码。

您是否为 s-s-r 配置了 Amplify，即。 Amplify.configure( ...awsExports, s-s-r: true );?

是的，我的_app.js有它

更新了答案。

【参考方案2】：

不过，我还是不明白为什么这不起作用，所以我决定将我的查询移到客户端

const [activation, setActivation] = useState(null);

const router = useRouter();
const  aid  = router.query;

useEffect(() => 
  if (!aid) return;

  async function activationDataFromClient() 
    try 
      const getActivationData = await API.graphql(
        query: getActivation,
        variables: 
          id: aid,
        ,
      );

      setActivation(getActivationData.data.getActivation);
     catch (err) 
      console.log("error fetching activation data: ", err);
    
  
  activationDataFromClient();
, [aid]);