Modify Apollo React function to use parameters

Question

I'm currently using this function in React:

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

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

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

I want to make this function re-usable with a parameter so tried:

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

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

  if (data) return <callingApp data={data.tag} />;
}

Then called it here:

<GQLFunc callingApp={WrappedApp} />

What am I doing wrong here? I'd also like to add a parameter for data = data.tag

Answer 1

You need to use uppercased name of rendered component, f.e.:

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

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

  let CallingApp = props.callingApp;
  if (data) return <CallingApp data={data.tag} />;
}