graphql - 如何同时使用模拟的 graphql API 和外部服务的 GraphQL 端点

Question

我希望能听到这里专家的一些意见。我目前正在 NextJS 项目上工作，我的 graphql 正在运行在另一个 repo 中设置的模拟数据上。现在后端由其他开发人员构建，正在慢慢从模拟数据转向真实数据。他们给了我一个到后端的端点，我应该在那里查询数据。因此，我们的目标是至少在我们完全删除模拟数据之前，让模拟的 graphql 数据和后端的真实数据并排工作。到目前为止看到了 2 种方法，但我一直在寻找一种方法，我仍然可以使用像 useQuery 和 useMutation 这样的钩子(Hook)

方式#1

require('isomorphic-fetch');
fetch('https://graphql.api....', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query: `
    query {
        popularBrands ( storefront:"bax-shop.nl", limit:10, page:1){
            totalCount
            items{id
            logo  
            name
            image
            }
          }
        }` 
    }),
})
.then(res => res.json())
.then(res => console.log(res.data));

方式#2

const client = new ApolloClient({
    uri: 'https://api.spacex.land/graphql/',
    cache: new InMemoryCache()
});
async function test () {
    const { data: Data } = await client.query({
        query: gql`
          query GetLaunches {
            launchesPast(limit: 10) {
              id
              mission_name
              launch_date_local
              launch_site {
                site_name_long
              }
              links {
                article_link
                video_link
                mission_patch
              }
              rocket {
                rocket_name
              }
            }
          }
        `
      });
      console.log(Data)
}

Answer 1

伪代码:

1. 先查询真实数据
2. 检查它是否为空，如果是，查询模拟数据。
3. 如果两者都是空的，那么它真的是一个空的结果集。

您可以围绕您使用的钩子(Hook)编写一个包装器来为您完成此操作，这样您就不必在每个组件中重复自己的操作。当您准备好删除模拟数据时，您只需删除第二个检查。数据集。

这是切换到新数据库时的常用技术。