Apollo has an addon for Storybook: https://storybook.js.org/addons/storybook-addon-apollo-client/

We should provide similar functionality for components built with the Nova facade.

• loading state
• error state
• mock data inputs for various queries

We should perhaps import the 1GQL schema and augment it locally for now with the pieces needed by AppBar and MeControl?

In TMP, the nova-facade-react package depends on invariant and imports the default as invariant:

e.g.
import * as invariant from "invariant";
https://domoreexp.visualstudio.com/Teamspace/_git/teams-modular-packages?path=%2Fpackages%2Fnova%2Ffacade%2Fnova-facade-react%2Fsrc%2Fgraphql%2Fhooks.ts&version=GBmaster

When this code is used in react-native bundles, the result is an object named invariant instead of a function named invariant (see zertosh/invariant#32).

For the code to work in web and react native, the imports should change to
import invariant from "invariant";

In 1JS, I patched nova-facade-react with this change and verified it works in both web and native. https://office.visualstudio.com/Office/_git/1JS/pullrequest/978506

When running Storybook in TMP, we are hitting an issue where we cannot load stories using this file: @nova\react\lib\graphql\taggedNode.mjs

Console shows the following error:

Replacing the contents of the mjs file in node_modules with the below code (removing the require and importing normally) resolves the loading issue.

import invariant from "invariant";
import {graphql as graphql2} from "@graphitation/graphql-js-tag"

function graphql(document, ...fragments) {
  invariant(graphql2 !== void 0, "Expected the host application to provide the `@graphitation/graphql-js-tag` package");
  return graphql2(document, ...fragments);
}

export {
  graphql
};

Hi,

Scenario
Org Explorer is an Apollo graphql people experience (aka.ms/orgexplorer) where my team integrated People Highlights (ref on scenario here). Our integration package is implementing the nova data interface.

Background info
Today highlights are integrated in the host app (OrgX) root query. OrgX is a NON-nova host app. Highlights type is embedded inside OrgX root query making the implementation of useLazyLoadQuery difficult. so far we opted for implementing the following methods, while querying happens inside the host app and then it's passed down as props:

• useMutation - this works well because highlights are not embedded in the orgx root mutation (it's decoupled)
• useFragment - we are relying on the default implementation where data passed via props is mirrored.

Challenge
Since data is passed down via props, we can't ensure proper usage of useFragment unless we extract from the Fragment$key the data and forcefully cast it to a ref.

const highlightRef = props.personaHighlightFragment[" $data"] as unknown as {
    readonly " $fragmentRefs": FragmentRefs<"HighlightsFragment">;
  };

where personaHighlightFragment is a Nova fragment constructed this way (on the host app)

 // Convert from Apollo fragment to Nova(Relay) fragment
  const personaHighlightFragment: NovaHighlightsFragment$key = {
    " $fragmentRefs": { HighlightsFragment: true },
    " $data": personaHighlight as NovaHighlightsFragment,
  };

Ask: Enable nova to handle such object transformations when data is not fetched via useLazyLoadQuery but rather passed via props.

With nova/react version 0.3.5, Midgard started throwing errors during linting. One example is NovaGraphQL interface which accepts GraphQLDocument of types any.

File: nova-graphql.interface.ts

export interface NovaGraphQL<GraphQLDocument = any> {)

Use case example:

  return (
    <HighlightsContextProvider
      hostAppCallbacks={hostAppCallbacks}
      logger={logger}
      highlightsFragment={highlights_highlightFragment}
    >
      <NovaGraphQLProvider graphql={novaGraphQL}> // this throws errors during linting
        {props.children}
      </NovaGraphQLProvider>
    </HighlightsContextProvider>
  );

yarn lint reports:

ERROR: 87:8  no-unsafe-any  Unsafe use of expression of type 'any'.
ERROR: 89:9  no-unsafe-any  Unsafe use of expression of type 'any'.

Info on the error: https://palantir.github.io/tslint/rules/no-unsafe-any/

TSLint is configured with:

{
  "extends": ["@1js/linting"],
  "rules": {
    "no-unsafe-any": true
  }
}

A workaround is to tag the codeblock with // tslint:disable: no-unsafe-any

In TMP, the nova-facade-react package has a hard dependency on a particular version of "react".

https://domoreexp.visualstudio.com/Teamspace/_git/teams-modular-packages?path=%2Fpackages%2Fnova%2Ffacade%2Fnova-facade-react%2Fpackage.json&version=GBmaster&line=24&lineEnd=25&lineStartColumn=1&lineEndColumn=1&lineStyle=plain&_a=contents

When consumed in 1JS, this causes webpack and react native bundle issues as two versions of react are bundled.

In 1JS, I worked around it by using a yarn workspace resolution:

https://office.visualstudio.com/Office/_git/1JS/pullrequest/978506?path=%2Fmidgard%2Fpackage.json&_a=files

When nova-facade-react is ported to GitHub, please use a "peerDependency" to "react" instead of a "dependency".