Create UserSecretQuery to align with related NerdGraph feature

[tangollama]

Create a data fetching component that wraps a NerdGraph request like the following (currently only accessible in the Product schema, but to be released in some modified form later in the year).

{
  actor {
    nerdStorageVault {
      secret(name: "my-token")
    }
  }
}

UserSecretQuery

Query Storage Vault (i.e. secrets encrypted at rest) for user scoped secrets.

Retrieve a secret by name.

Declarative query

//retrieve and use a stored secret
import { UserSecretQuery } from '@newrelic/nr1-community';
//SomeOutsideDataComponent takes a token and makes an external call
import { SomeOutsideDataComponent } from './SomeOutsideDataComponent';

<UserSecretQuery secret="outside_token">
  {({ loading, error, data }) => {
    if (loading) {
      return <Spinner />;
    }
    if (error) {
      return 'Error!';
    }
    const { outside_token } = data;
    return <SomeOutsideDataComponent token={outside_token} />;
  }}
</UserSecretQuery>;

Imperative query

UserSecretQuery.query({
  secret: 'mytoken'
}).then(({ data }) => console.log(data));

Props

prop	REQUIRED	type	description
children	TRUE	function	Render prop function as a child.
secret	TRUE	string	Name of secret for search

[zstix]

It would be awesome to provide a hook for this as well (once we upgrade React :crossed_fingers:):

// get a specific secret (my_token)
const [token, loading] = useUserSecretQuery('my_token');

return loading
  ? <Spinner />
  : <div>Your secret: {token}</div>;

// get all secrets
const [secrets, loading] = useUserSecretQuery();

return loading
  ? <Spinner />
  : <ul>{secrets.map((secret, i) => <li key={i}>{secret}</li>)}</ul>;