How to use the react-apollo/graphql function in react-apollo

// COLLECTION
// ==========

const collectionQuery = gql`
  query collection($id: ID!) {
    Collection(id: $id) {
      id
      title
      apps {
        ...AppFragment
      }
    }
  }
  ${AppFragment}
`;
const collection = graphql(collectionQuery, {
  options: props => ({ variables: { id: props.collectionId } }),
  skip: props => !props.collectionId,
  props: ({ ownProps, data }) => ({
    data: {
      ...data,
      apps: get(data, 'Collection.apps', get(ownProps, 'apps', [])),
    },
  }),
});

// TOP APPS
// ========

const topAppsQuery = gql`
  query allApps(
    $first: Int

description_contains: " ",
        }
      ) {
        id
        title
        description
        createdAt
        rating
        name
      }
    }
  }
  ${AppFragment}
`;

export const appWithProps = graphql(query, {
  options: props => ({
    variables: {
      id: props.app.id,
    },
  }),
  // Attempt to re-use passed props while loading
  props: ({ ownProps, data }) => ({
    data: {
      ...data,
      App: {
        ...ownProps.app,
        ...data.App,
      },
    },
  }),
});

imageUrl
      legend
      title
      date
      app {
        ...AppFragment
      }
      apps {
        ...AppFragment
      }
    }
  }
  ${AppFragment}
`;

export default graphql(query, {
  options: props => ({
    variables: {
      first: props.first || 10,
    },
  }),
});

) {
    allApps(
      filter: {
        id_not: $id
        categories_some: {
          id_in: $categories
        }
      }
    ) {
      ...AppFragment
    }
  }
  ${AppFragment}
`;

const relatedCategoriesApps = graphql(relatedCategoriesAppsQuery, {
  options: ({ appId, relatedCategoryIds = [] }) => ({
    variables: {
      filter: {
        ...(appId && { id_not: appId }),
        ...({ categories_some: { id_in: relatedCategoryIds } }),
      },
    },
  }),
  skip: props => !props.relatedCategoryIds,
  props: ({ ownProps, data }) => ({
    data: {
      ...data,
      apps: get(data, 'allApps', get(ownProps, 'apps', [])),
    },
  }),
});

const QUERY = gql`
  query AttendanceQuery($token: String!) {
    authenticatedStudent(token: $token) {
      isAuthorized
      courses {
        name
        absence {
          level
          severity
        }
      }
    }
  }
`;

export default graphql(QUERY, {
  options: graphqlCredentialsOptions,
})(Attendance);

$after: String
    $filter: AppFilter
  ) {
    allApps(
      orderBy: score_DESC
      first: $first
      after: $after
      filter: $filter
    ) {
      ...AppFragment
    }
  }
  ${AppFragment}
`;

const topApps = graphql(topAppsQuery, {
  options: ({ type, top, categoryIds = [] }) => ({
    variables: {
      filter: {
        type,
        ...(top === 'PAID' ? { price_not: null } : { price: null }),
        ...(categoryIds.length > 0 ? { categories_some: { id_in: categoryIds } } : {}),
      },
    },
  }),
  skip: props => !props.top,
  props: ({ ownProps, data }) => ({
    data: {
      ...data,
      apps: get(data, 'allApps', get(ownProps, 'apps', [])),
    },
  }),

) {
      id
      title
      appType
      type
      position
      rows
      apps {
        ...AppFragment
      }
    }
  }
  ${AppFragment}
`;

export default graphql(query, {
  options: props => ({
    variables: {
      appType: props.type,
    },
  }),
});

$after: String
    $filter: AppFilter
  ) {
    apps: allApps(
      orderBy: score_DESC
      first: $first
      after: $after
      filter: $filter
    ) {
      ...AppFragment
    }
  }
  ${AppFragment}
`;

export default graphql(topAppsQuery, {
  options: ({
    size,
    type,
    top,
    categoryIds = [],
  }) => ({
    variables: {
      first: size,
      filter: {
        type,
        ...(top === 'PAID' ? { price_not: null } : { price: null }),
        ...(categoryIds.length > 0 ? { categories_some: { id_in: categoryIds } } : {}),
      },
    },
  }),
});

first: 15
      filter: {
        id_not: $id,
        type: $type,
        categories_some: {
          id_in: $categories
        }
      }
    ) {
      ...AppFragment
    }
  }
  ${AppFragment}
`;

export default graphql(query, {
  options: props => ({
    variables: {
      id: props.id,
      type: props.type,
      categories: props.categories,
    },
  }),
});

...CourseFragment
        weekday
      }
      transcript {
        semesters {
          year
          gpa
        }
      }
    }
  }
  ${Card.fragment}
`;

export default compose(
  graphql(QUERY, {
    options: graphqlCredentialsOptions,
  }),
  withTheme
)(Home);