reactjs 使用GraphQL和React最大限度减少API调用

bq3bfh9z  于 2023-02-08  发布在  React
关注(0)|答案(1)|浏览(141)

我用GraphQL(Apollo Server)编写了一个API,用React(利用Apollo Client)编写了一个单独的应用程序。应用程序本身非常简单,根本不需要多次调用API,而且由于使用了GraphQL,我可以在2次调用中获得用户需要的所有数据,唯一需要重新获取数据的时间是在发生变化之后。
我有一个登录和一个注册变异,然后还有两个变异来创建一个更新用户交互的主对象。
我对React和GraphQL相当熟悉,但我觉得必须有一种方法在登录/注册突变后进行一个“更大”的调用,以获取用户需要的所有数据,而不是基于特定组件的加载对每一级嵌套进行调用。

突变

  • 注册
  • 登录
  • 创建衬衫
  • 更新衬衫
    查询
  • 获取衬衫
  • 获取设计

理想情况下,我可以使用类似于

query GetUser {
  user {
    id
    email
    shirts {
      id
      style
      design {
        name
        swatch
      }
    }
  }
}

因此,我可以在SignIn / SignUp变体中返回所有这些信息,但在UpdateShirt变体之后,我没有可以强制重取的(已命名)查询。因此,我倾向于创建一个GetUser查询,可以重取,但不知道从哪里调用它。它不一定特定于某个组件,更多的是身份验证状态。
查询API中的这些信息的最有效的方法是什么?忽略嵌套查询的能力并让组件请求它看起来很愚蠢。

szqfcxe2

szqfcxe21#

我想,这就是你要找的?
https://www.apollographql.com/docs/react/data/mutations/#refetching-queries
在调用了变异之后,可以通过这种方式重新获取查询。

// Refetches two queries after mutation completes
const [addTodo, { data, loading, error }] = useMutation(ADD_TODO, {
  refetchQueries: [
    {query: GET_POST}, // DocumentNode object parsed with gql
    'GetComments' // Query name
  ],
});

但是,如果您想要一个请求,则意味着您要寻找的是批处理
您可以批处理多个查询,如下所示:

const { data } = useQuery(gql`
query ShameelQuery {
  query1
  query2
}
`)

您可以在他们的官方文档中找到更多详细信息:https://www.apollographql.com/blog/apollo-client/performance/batching-client-graphql-queries/

相关问题