Is FrintJS compatible with Apollo 2.0?

Very excited to see this library! Question about modularity of Frint:

Now that Apollo has adopted observables, how well might frint and apollo play together?

[fahad19]

Hi @loganpowell! Thanks for your interest!

Few things to understand about FrintJS packages:

frint

This package is for creating Apps (and Child Apps), and for defining the dependencies as Providers. It has nothing to do with rendering, or anything browser specific.

import { createApp } from 'frint';

const MyApp = createApp({
  name: 'MyApp',
  providers: [
    { name: 'foo', useValue: 'bar' }
  ],
});

const app = new MyApp();
const foo = app.get('foo'); // `bar`

frint-react

This package is for integrating React with FrintJS apps.

Rendering

It allows you to render your FrintJS apps to DOM:

import React from 'react';
import { createApp } from 'frint';
import { render } from 'frint-react';

function MyComponent() {
  return <p>Hello World</p>;
}  

const MyApp = createApp({
  name: 'MyApp',
  providers: [
    { name: 'component', useValue: MyComponent }
  ],
});

const app = new MyApp();
render(app, document.getElementById('root'));

Streaming props

It ships a higher-order component called observe that allows access to your App instance, where you can get access to your Providers.

Now it is totally up to you to either generate props for your base component synchronously, or stream it using Observable:

// MyComponent.js
import React from 'react';
import { observe } from 'frint-react';

function MyComponent(props) {
  return <p></p>;
}

export default observe(function (app) {
  const props = {};

  // synchronous
  return props;

  // stream
  return new Observable.of(props);
})(MyComponent);

Apollo integration

I haven’t worked with Apollo myself, but I see it integrating with FrintJS+React like this.

All the stateful dependencies of your FrintJS App are expected to be set as providers. So your Apollo client could be a provider here:

import ApolloClient from 'apollo-client-preset';
import { createApp } from 'frint';

const MyApp = createApp({
  name: 'MyApp',
  providers: [
    {
      name: 'apollo',
      useFactory() {
        return new ApolloClient();
      },
    },
  ]
});

Now you can access the client from anywhere in your React components tree using the observe higher-order component:

import React from 'react';
import { observe } from 'frint-react';

function MyComponent() {
  return <p></p>;
}

export default observe(function (app) {
  const client = app.get('apollo');

  return {}; // or Observable of props
})(MyComponent);

What if you wanted to use react-apollo and its graphql component enhancer?

import React from 'react';
import ApolloClient from 'apollo-client-preset';
import { ApolloProvider } from 'react-apollo';
import { createApp } from 'frint';

function Root() {
  return <p></p>;
}

const MyApp = createApp({
  name: 'MyApp',
  providers: [
    // we define our client first
    {
      name: 'apollo',
      useFactory() {
        return new ApolloClient();
      },
    },

    // we define our component, and inject `apollo` as a dependency to it
    {
      name: 'component',
      deps: ['apollo'],
      useFactory({ apollo }) {
        return (
          <ApolloProvider client={apollo}>
            <Root />
          </ApolloProvider>
        );
      },
    },
  ]
});

That way, your client is set as a provider, and also lets you use the graphql HoC from react-apollo anywhere from your components tree:

// components/Todo.js
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';

function TodoApp({ data: { todos, refetch } }) {
  return (
    <div>
      <button onClick={() => refetch()}>Refresh</button>
      <ul>{todos && todos.map(todo => <li key={todo.id}>{todo.text}</li>)}</ul>
    </div>
  );
}

export default graphql(gql`
  query TodoAppQuery {
    todos {
      id
      text
    }
  }
`)(TodoApp);

---

To summarize, FrintJS does not come in your way of using other solutions like Redux or Apollo (even with their own React specific packages).

Hope that helps!

[fahad19]

Closing this issue assuming it answered everything you needed to know for now.

For further reading:

• Hello World guide: https://frint.js.org/guides/hello-world/
• Providers: https://frint.js.org/docs/packages/frint/#understanding-providers
• The observe higher-order component: https://frint.js.org/guides/higher-order-components/
• frint-props: https://github.com/frintjs/frint-props