Replace static array of objects with GraphQL queried data

Question

I have static data in my React app in a file called tags.js as follows:

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

I import this into my index.js file and use it in my App.

import tagsArray from "./tags";

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

I have a remote GraphQL service containing updated data and want to use a query to pull the array of objects and replace the static tagsArray.

I can successfully query the GraphQL data with this function:

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>
  ));
}

Which returns:

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

I know this format is incorrect but I'm not sure how to modify the function to map the data to the same format (array of objects) as tagsArray and then assign it to a variable called queriedTagsArray so I could use it in my app as follows:

<App data={queriedTagsArray} />

?? data.tag already is in desired format - check network/json response if in doubt - <App data={data.tag} /> ? — xadm
– xadm, Commented Jun 1, 2020 at 0:57
@xadm How do I access data.tag please as currently this would error with 'data' is not defined — nipy
– nipy, Commented Jun 1, 2020 at 7:23
only if not loaded yet? ... use conditions as above (if (loading) return <p>Loading...</p>;) or if(data) return <App... — xadm
– xadm, Commented Jun 1, 2020 at 7:39
noooooo, in GQLTagFunc you should return <App... instead of return data.tag.map ... and <GQLTagFunc/> inside Apollo provider (instead of App) .... but to be truth you should rename it (index reactDOM.render only 'new' App... App renders Apollo with GQLTagFunc inside ... GQLTagFunc returns WrappedApp (renamed App) after reading data — xadm
– xadm, Commented Jun 1, 2020 at 8:04

xadm · Accepted Answer · 2020-06-01 08:21:53Z

1

You need to wrap entire, existing App into Apollo provider and your querying component.

To keep naming conventions:

rename your existing App to WrappedApp,
create a new <App/> component with Apollo initialization and rendering ApolloProvider' and your query component ( ` ),
in index.js just ReactDOM.render( <App/>, document.getElementById("root") );

Use new name of App (WrappedApp) in GQLTagFunc:

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} />;
}

Hint

If this is your only graphql querying then you don't need [big] Apollo at all - you can use fetch/axios to read json data.

answered Jun 1, 2020 at 8:21

xadm

8,4463 gold badges17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Replace static array of objects with GraphQL queried data

1 Answer 1

Hint

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Hint

Comments

Your Answer

Sign up or log in

Post as a guest

Related