Question

我的React应用程序中的静态数据位于名为tags.js的文件中，如下所示：

const tagsArray = [
  {
    id: 1,
    label: "test1" 
  },
  {
    id: 2,
    label: "test2"
  }]

我将此导入到index.js文件中，并在我的应用中使用。

import tagsArray from "./tags";

ReactDOM.render(
<App data={tagsArray} />
document.getElementById("root")
);

我有一个包含更新数据的远程GraphQL服务，并且想使用查询来提取对象数组并替换静态tagsArray。

我可以使用以下函数成功查询GraphQL数据：

function GQLTagFunc() {
  const { loading, error, data } = useQuery(GQLTAGS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return data.tag.map(({ id, label }) => (
    <div key={id}>
      id:{id}, label:{label}
    </div>
  ));
}

哪个返回：

id:1, label:"test1"
id:2, label:"test2"

我知道此格式不正确，但是我不确定如何修改该函数以将数据映射为与tagsArray相同的格式（对象数组），然后将其分配给名为{{1 }}，因此可以在我的应用中按如下方式使用它：

queriedTagsArray

Answer 1

您需要将整个现有应用程序包装到Apollo提供程序和查询组件中。

要保持命名约定：

将您现有的App重命名为WrappedApp，
使用Apollo初始化并渲染<App/>`）创建一个新的ApolloProvider' and your query component (组件，
在index.js中只是ReactDOM.render( <App/>, document.getElementById("root") );

在GQLTagFunc中使用App的新名称（WrappedApp）：

function GQLTagFunc() {
  const { loading, error, data } = useQuery(GQLTAGS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return <WrappedApp data={data.tag} />;
}

提示

如果这是您唯一的graphql查询，那么您根本不需要[big] Apollo-您可以使用fetch / axios读取json数据。

用GraphQL查询的数据替换对象的静态数组

1 个答案:

提示