npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@qwick/apollo

v5.2.0-rc6

Published

BuckleScript bindings for Apollo Client and React Apollo

Downloads

4

Readme

Reason-apollo

npm version Get on Slack

React-apollo with Reason

Install and setup

Install

yarn add reason-apollo

# Add graphql_ppx
yarn add --dev graphql_ppx

# Add JS dependencies
yarn add react-apollo apollo-client apollo-cache-inmemory apollo-link apollo-link-context apollo-link-error apollo-link-http graphql graphql-tag apollo-link-ws apollo-upload-client subscriptions-transport-ws

bsconfig

Add reason-apollo to your bs-dependencies and graphql_ppx/ppx to your ppx_flags

bsconfig.json

"bs-dependencies": [
  "reason-react",
  "reason-apollo"
],
"ppx-flags": [
    "graphql_ppx/ppx"
]

Send introspection query

This will generate a graphql_schema.json which will be used to safely type your GraphQL queries/mutations.

yarn send-introspection-query http://my-api.example.com/api

Why reason-apollo?

Watch its usage in this video:

Watch reason-apollo usage here

Usage

Create the Apollo Client

Client.re

/* Create an InMemoryCache */
let inMemoryCache = ApolloInMemoryCache.createInMemoryCache();

/* Create an HTTP Link */
let httpLink =
  ApolloLinks.createHttpLink(~uri="http://localhost:3010/graphql", ());

let instance =
  ReasonApollo.createApolloClient(~link=httpLink, ~cache=inMemoryCache, ());

ApolloProvider

Index.re

/*
   Enhance your application with the `ReasonApollo.Provider`
   passing it your client instance
 */
ReactDOMRe.renderToElementWithId(
  <ReasonApollo.Provider client=Client.instance>
    <App />
  </ReasonApollo.Provider>,
  "index",
);

Query

MyComponent.re

/* Create a GraphQL Query by using the graphql_ppx */
module GetPokemon = [%graphql
  {|
  query getPokemon($name: String!){
      pokemon(name: $name) {
          name
      }
  }
|}
];

module GetPokemonQuery = ReasonApollo.CreateQuery(GetPokemon);

let make = _children => {
  /* ... */,
  render: _ => {
    let pokemonQuery = GetPokemon.make(~name="Pikachu", ());
    <GetPokemonQuery variables=pokemonQuery##variables>
      ...{
           ({result}) =>
             switch (result) {
             | Loading => <div> {ReasonReact.string("Loading")} </div>
             | Error(error) =>
               <div> {ReasonReact.string(error##message)} </div>
             | Data(response) =>
               <div> {ReasonReact.string(response##pokemon##name)} </div>
             }
         }
    </GetPokemonQuery>;
  },
};

Mutation

MyMutation.re

module AddPokemon = [%graphql
  {|
  mutation addPokemon($name: String!) {
      addPokemon(name: $name) {
          name
      }
  }
|}
];

module AddPokemonMutation = ReasonApollo.CreateMutation(AddPokemon);

let make = _children => {
  /* ... */,
  render: _ =>
    <AddPokemonMutation>
      ...{
           (mutation /* Mutation to call */, _) => {
             /* Result of your mutation */

             let newPokemon = AddPokemon.make(~name="Bob", ());
             <div>
               <button
                 onClick={
                   _mouseEvent =>
                     mutation(
                       ~variables=newPokemon##variables,
                       ~refetchQueries=[|"getAllPokemons"|],
                       (),
                     )
                     |> ignore
                 }>
                 {ReasonReact.string("Add Pokemon")}
               </button>
             </div>;
           }
         }
    </AddPokemonMutation>,
};

ApolloConsumer

If you simply want to have access to the ApolloClient, you can use the ApolloConsumer

<ApolloConsumer>
  ...{apolloClient => {/* We have access to the client! */}}
</ApolloConsumer>;

Tips and Tricks

Use @bsRecord on response object

The @bsRecord modifier is an extension of the graphql syntax for BuckleScipt/ReasonML. It allows you to convert a reason object to a reason record and reap the benefits of pattern matching. For example, let's say I have a nested object of options. I would have to do something like this:

switch response##object {
| Some(object) => {
  switch object##nestedValue {
  | Some(nestedValue) => nestedValue
  | None => ""
  }
}
| None => ""
}

Kind of funky, huh? Let's modify the response and convert it to a reason record.

type object = {
  nestedValue: option(string)
}


module GetObject = [%graphql {|
  object @bsRecord {
    nestedValue
  }
 |}
];

This time we can pattern match more precisely.

switch response##object {
| Some({ nestedValue: Some(value) }) => value
| Some({ nestedValue: None }) => ""
| None => ""
}

Use an alias for irregular field names

You might find yourself consuming an API with field names like Field. Currently, reason object field names are required to be camel case. Therefore if you have a request like this:

{
  Object {
    id
    title
  }
}

You will attempt to access the response object but it will throw an error:

response##Object; /* Does not work :( */

Instead, use an alias to modify the response:

{
  object: Object {
    id
    title
  }
}

Then you can access the object like this:

response##object

Generic Error and Loading components

You can create a generic error and Loading component and compose them like this example:

module QueryView = {
  let component = ReasonReact.statelessComponent(__MODULE__);

  let make =
      (
        ~result: ReasonApolloTypes.queryResponse('a),
        ~accessData: 'a => option('b),
        ~render: ('b, 'c) => ReasonReact.reactElement,
        ~onLoadMore: ('b, 'unit) => unit=(_, ()) => (),
        _children,
      ) => {
    ...component,
    render: _self =>
      switch (result) {
      | Error(error) => <Error />
      | Loading => ReasonReact.null
      | Data(response) =>
        switch (accessData(response)) {
        | Some(data) => render(data, onLoadMore(data))
        | _ => <Error error="" />
        }
      },
  };
};

FAQ

I've added the schema file, but my build fails saying it couldn't be found?

In some cases, it seems like there are some differences between the provided send-introspection-query and output from tools you might be using to download the schema (such as apollo-codegen or graphql-cli). If your build is failing, please make sure to try with the provided script. In your project root, run:

$ yarn send-introspection-query <url>