Micro Apps

This tutorial will go over how to build micro applications for your Shopify shop. We will be building the tracking application that is currently on the application.

First, We Import the Packages We Need#

import { useState }, React from "react";
import PropTypes from "prop-types";
import fetch from "isomorphic-unfetch";
import { Pane, TextInput, Heading, Text, Spinner, Button } from "evergreen-ui";

We will be using React Hooks so we import useState. We will be using evergreen-ui to build our UI. And finally, fetch to get our data.

Next, We Build the Submission Form.#

const Tracking = ({ url }) => {
  const [result, setResult] = useState("");
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);

  return (
    <Pane elevation={1} borderRadius="5px" padding={15} background="#fff">
      <Heading size={400} marginBottom={10}>
        Fetch Tracking
      </Heading>
      <Pane display="flex" marginBottom={15}>
        <TextInput
          onChange={e => setInput(e.target.value)}
          value={input}
          height={24}
          backgroundColor="#F5F6F7 !important"
        />
        <Button
          intent="success"
          height={24}
          fontSize="13px"
          marginLeft={10}
          onClick={() => getTracking(url, input, setResult, setLoading)}
        >
          Get Tracking
        </Button>
      </Pane>
      {loading ? <Spinner size={24} /> : <Text>{result}</Text>}
    </Pane>
  );
};

The submission form has an input field and a submit button. We are using 3 states, input value, result, and loading. On submit, we are calling the getTracking function.

Fetching the GraphQL API#

function getTracking(
  url, 
  input, 
  setResult, 
  setLoading
  ) {
  setLoading(true);
  fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      query: `
    {
        orders(
          first: 1
          query: ${input}
        ) {
          edges {
            node {
              email
              fulfillments(first: 25) {
                trackingInfo {
                  company
                  number
                  url
                }
              }
            }
          }
        }
      }
    `,
    }),
  })
    .then(res => res.json())
    .then(res => {
      const order = res.data.orders.edges.length
        ? res.data.orders.edges[0].node.fulfillments
        : 'No orders found';
      setResult(order);
      setLoading(false);
    });
}

The getTracking function needs 4 variables: url, input, setResult, and setLoading.

  • The url is passed as a prop to the component and we simply pass it in the function. The url is the endpoint where your shop's graphQL API is mounted.
  • Input is what the user has entered in the text field.
  • setResults and setLoading are to change the state and return the results.

We simply post a graphQL query to the endpoint and set the results to our state. You can use the Playground to create and test different queries and mutations. You can click the DOCS button on the Playground to get the full Shopify graphQL API spec.

Tip: GraphQL allows you to autocomplete by clicking cmd+space. This will pull up all the info that a query or mutation can return.

Adding Component to Shop Page#

After you are finished with the UI and the fetch query, we need to import this component into the shop component. We pass the URL for where the endpoint is mounted.

 <Tracking url={`https://dashboard.openship.org/shopify/${name}/graphql`} />

Overview#

In this tutorial you got a quick overview about how to make micro apps. You can make a micro apps that can pull up pertaining info about orders, change orders, or even connect to 3rd-party apps you already use like Mailchimp, Zendesk, etc.

Copyright © 2020 Openship

Documentation theme by Segun Adebayo