How to use the react-apollo.useQuery function in react-apollo

const SurveyResults = () => {
  const { courseId } = useParams();
  const { loading, error, data } = useQuery(COURSE_QUERY, { variables: { id: courseId } });

  const downloadCsv = () => {
    // Check that data has loaded
    if (loading || error || !data || !data.course) {
      alert('The survey data has not loaded. Please refresh the page and try again.');
    }

    const { course } = data;
    const { students } = course;
    const rows = [];

    // Header row with survey questions
    let headerRow = ['Student Name'];
    headerRow = headerRow.concat(course.survey.questions.map(q => q.prompt));
    rows.push(headerRow);

};

  const search = tokenizedValuesFromString((qs.q as string) || "", suggestions);
  const setSearch = (search: TokenizingFieldValue[]) => {
    // Note: changing search also clears the cursor so you're back on page 1
    setCursorStack([]);
    const params = { ...qs, q: stringFromValue(search), cursor: undefined };
    history.push({ search: `?${querystring.stringify(params)}` });
  };

  const queryVars: RunsRootQueryVariables = {
    cursor: cursor,
    limit: PAGE_SIZE + 1,
    filter: runsFilterForSearchTokens(search)
  };
  const queryResult = useQuery(
    RUNS_ROOT_QUERY,
    {
      fetchPolicy: "cache-and-network",
      pollInterval: 15 * 1000,
      partialRefetch: true,
      variables: queryVars
    }
  );

  return (

const CourseList = () => {
  const { error, data } = useQuery(INSTRUCTOR_QUERY);
  console.log(data);

  if (error) {
    return (
      
        <p>Couldn’t load courses.</p>
      
    );
  }

  if (!data || (data &amp;&amp; !data.currentInstructor)) {
    return ;
  }

  const { courses } = data.currentInstructor;

const PledgedCollectivePage = ({ collective }) => {
  const { loading, error, data } = useQuery(CollectivePledgesQuery, { variables: { id: collective.id } });

  if (loading) {
    return (
      
        
      
    );
  } else if (error) {
    return (
      
        
          {error.toString()}
        
      
    );
  }

const RoleForm = () => {
    const scopesQuery = useQuery(LIST_SCOPES);
    const scopes = get(scopesQuery, "data.security.scopes") || [];
    const { form: crudForm } = useCrud();

    return (
        <form>
            {({ data, form, Bind }) =&gt; (
                
                    {crudForm.loading &amp;&amp; }
                    
                    
                        
                            
                                
                                    <input label="{t`Name`}">
                                
                            </form>

let query: any;
    let skip: boolean = false;
    let variables: Vars | undefined;

    if (id) {
        variables = { id };
        query = config.updateQuery;
    } else if (config.createQuery) {
        query = config.createQuery;
    } else {
        query = config.updateQuery;
        skip = true;
    }

    const authUser = useCoreContext().authUser!;
    const { loading, error, data, client } = useQuery(query, {
        variables,
        skip,
    });

    if (loading) return ;
    if (error) return ;

    const props = config.handleFormProps(authUser, data || {});

    return (
        
            
                client={client}
                {...passThroughProps}
                {...props}
                modelName={modelName}

if (state.size) state.size = toNumber(state.size);
        if (state.from) state.from = toNumber(state.from);

        const updateQueryState = (updates: QueryState) => {
            history.push({
                search: stringify({ ...state, ...updates }),
            });
        };

        const variables = {
            ...state,
            query: formatRegexQuery(state.query || '', searchFields),
        };

        const { loading, error, data } = useQuery(listQuery, {
            variables,
            fetchPolicy: 'cache-and-network',
        });

        if (error) return ;
        if (!data && !loading) {
            return ;
        }

        const records = (data && data.records) || [];
        const total = (data && data.total) || 0;

        return (

export default function ResolverAndRecords({
  domain,
  isOwner,
  refetch,
  account
}) {
  const hasResolver = hasAResolver(domain.resolver)
  let isOldPublicResolver = false
  let isDeprecatedResolver = false
  let areRecordsMigrated = true

  const { data, loading } = useQuery(GET_RESOLVER_MIGRATION_INFO, {
    variables: {
      name: domain.name,
      resolver: domain.resolver
    },
    skip: !hasResolver
  })

  if (data && data.getResolverMigrationInfo) {
    isOldPublicResolver = data.getResolverMigrationInfo.isOldPublicResolver
    isDeprecatedResolver = data.getResolverMigrationInfo.isDeprecatedResolver
    areRecordsMigrated = data.getResolverMigrationInfo.areRecordsMigrated
  }

  const needsToBeMigrated =
    !loading && (isOldPublicResolver || isDeprecatedResolver)

},
    validationSchema: Yup.object().shape({
      name: Yup.string()
        .required()
        .nullable(),
      networkId: Yup.string().nullable(),
      ipAddress: Yup.string().nullable(),
      listenPort: Yup.number()
        .positive()
        .nullable(),
    }),
  })

  const getNetworksQuery = useQuery(GET_NETWORKS)

  const getInterfaceQuery = useQuery(GET_INTERFACE, {
    variables: { id: urlParams.interfaceId },
    fetchPolicy: 'cache-and-network',
    onCompleted: data => {
      formik.setValues(
        {
          name: data.result.name,
          networkId: data.result.networkId,
          ipAddress: data.result.ipAddress,
          listenPort: data.result.listenPort,
        },
        true
      )
    },
    onError: () => {
      toast.error('Error fetching interface details')
      navigate(-1)

export const App: React.FunctionComponent = () => {
  const result = useQuery(ROOT_PIPELINES_QUERY, {
    fetchPolicy: "cache-and-network"
  });
  const { pipelines, error } = extractData(result.data);

  return (
    
      
      {error ? (
        
      ) : (
        
      )}