使用服务器端渲染重新获取查询 - graphQL

如何解决使用服务器端渲染重新获取查询 - graphQL

我在服务器端渲染我的数据时遇到了一个问题，包括 refetchQuery 到我的突变中。

在我的页面上，我使用这个 getServerSideProps 函数来获取我的数据 SSR：

export async function getServerSideProps(context) {
  const apolloClient = initializeApollo();
  const { data } = await apolloClient.query({query: GET_QUESTIONS_QUERY});

  return { props: { questionsInit: data,origin } };

这很好用，我将 props 传递给了一个名为 Questions 的组件，该组件具有一些 React 钩子：

export default function Questions({ questionsInit }) {
  const [questions,setQuestions] = useState({ ...questionsInit,status: "init"});
  const [questionsChanged,setQuestionsChanged] = useState(true);


  useEffect(() => {
    async function getQuestions() {
      if (questionsChanged !== null) {
        try {
          const { data } = await apolloClient.query({query: GET_QUESTIONS_QUERY});
          setQuestions({ ...data,status: 'success'});
        } catch (err) {
          setServerError({ message: err.message});
        }
      }
    }
    getQuestions();
  },[questionsChanged]);

然后我有一个 questionForm 组件（上一个问题组件的子组件），它基本上处理添加新问题，handleSubmit 看起来像这样：

    const handleSubmit = async (values) => {
        setServerError(null);
        try {
                const { data } = await addQuestion({ 
                    variables: {
                          title: values.title,description: values.description,handle: values.handle 
                  }})
                await new Promise(r => setTimeout(r,2000));
                const newdata = await apolloClient.query({query: GET_QUESTIONS_QUERY});
            }
            setQuestionsChanged((val) => !val); // <---calling the useEffect!!!
            setShow(false);
        } catch (err) {
            setServerError({ message: err.message });
            console.log(err.message);
        }
    }

这个想法是，在handleSubmit中，在将新问题添加到db（有效）后，我setQuestionsChanged到一个不同的值，它调用父组件中的useEffect函数。这是有效的，useEffect 在更改后被调用，但由于某种原因，被调用的 await apolloClient.query({query: GET_QUESTIONS_QUERY}); 不会返回数据库中的更新数据（与最近添加的问题一样更新，只是原始数据）。只有刷新后才能生效。我什至尝试设置 sleep() 计时器以查看它是否是服务器延迟，但这不起作用。

我知道我可能应该使用 refetchQueries 但问题是服务器端渲染，当它已经获得时没有必要使用 useQuery。但我觉得有一种方法可以合并我没有看到的 refetchQueries？