在使用 GraphQL 开发前端应用时，我们经常需要定义 Schema，它描述了我们从服务器请求的数据。但是，当使用 React 和其他前端框架时，我们会发现由于组件生命周期的运行，会导致 GraphQL Schema Invalidated 的问题，即序列化错误。本文将介绍这个问题，以及如何避免和解决它。
什么是 GraphQL Schema Invalidation
在使用 GraphQL 时，我们需要先定义 Schema，也就是描述从服务器请求的数据类型。例如，我们可能定义一个查询如下：
-- -------------------- ---- ------- ---- ----- - --------- ------ - ---- ---- - --- -- ----- ------ ---------- ------- -
然后，在编写前端代码时，我们会声明我们将使用哪些查询并发出请求：
-- -------------------- ---- -------
----- --------- - -- -- -
------ ------------------------
--- -------- ------ ---- -- -- -
----
----------------------- -- -
--- --------------
----------- - --------------- - ------ - -------
-----
---
-----
--
--------
-这段代码将发送一个名为 ALL_TODOS_QUERY 的查询，并使用它返回的数据来渲染一个列表。
然而，由于 React 组件的生命周期，在渲染期间，组件可能被多次销毁和重建。这可能会导致 GraphQL Schema Invalidated 的问题，即序列化错误。当 Query 组件被卸载或销毁时，将清除与该查询相关的任何缓存。因此，当组件重新挂载和重新渲染时，可能会发现它试图序列化无效的 GraphQL Schema。
如何避免和解决 GraphQL Schema Invalidation
为了避免 GraphQL Schema Invalidated 的问题，我们可以使用以下两种方法：
1. 将查询提升到父级组件
将 Query 组件提升到父级组件，以便在每次组件重新渲染时，Query 组件不需要被卸载和重新挂载。
-- -------------------- ---- -------
----- --- - -- -- -
------ ------------------------
--- -------- ------ ---- -- -- -
---------- --------------------- --
--
--------
-
----- --------- - -- ----- -- -- -
----
--------------- -- -
--- --------------
----------- - --------------- - ------ - -------
-----
---
-----
-这个例子中，我们已经将查询提升到了 App 组件，因此，在 TodosList 组件重新渲染时，Query 组件不会被销毁和重新挂载，而是被复用，并且不会导致 GraphQL Schema Invalidated 问题。
2. 关闭 Query 组件的 SSR（Server Side Rendering，即服务器端渲染）
如果您使用 SSR 渲染您的应用，您可能会遇到 GraphQL Schema Invalidated 问题。这是因为在服务器上，组件只被渲染一次，并且组件生命周期不会运行。然而，在客户端上，组件可能会在初次挂载后被卸载和重新挂载，从而导致 GraphQL Schema Invalidated 问题。
解决这个问题的一种方法是关闭 Query 组件的 SSR。您可以使用 react-apollo 的 <ApolloProvider> 组件，并将 ssrMode 属性设置为 false。这将确保 Query 组件只在客户端端挂载，不受 SSR 影响。
-- -------------------- ---- -------
------ - -------------- - ---- --------------
----- ------ - --- --------------
----- --- - -- -- -
--------------- --------------- ----------------
---------- --
-----------------
-
----- --------- - -- -- -
------ ------------------------
--- -------- ------ ---- -- -- -
----
----------------------- -- -
--- --------------
----------- - --------------- - ------ - -------
-----
---
-----
--
--------
-在这个例子中，我们使用了 ApolloProvider 组件，并将其 ssrMode 属性设置为 false，以避免 GraphQL Schema Invalidated 问题。
结论
在使用 GraphQL 和 React 进行前端开发时，我们可能会遇到 GraphQL Schema Invalidated 的问题，这是由组件生命周期导致的。为了避免这个问题，我们可以将查询提升到父级组件，或关闭 Query 组件的 SSR。上述两种方法都可以解决 GraphQL Schema Invalidated 问题，并确保我们的前端应用程序能够正确地运行和渲染。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676e8412e9a7045d0d6ae7cd