Public App + GraphQL Queries using Node or React

khouck18
Shopify Partner
7 0 0

Hi everyone,

 

I'm relatively new to Shopify and was trying to create a simple, public app that builds out a page based on what a user inputs into a form and adds it to their online store. I just had a quick question regarding keeping track of the store's url since it will be unknown to us unlike in the case of a private app. We used the Shopify App Cli to scaffold a project and implemented code to store both the store's url and accessToken in firebase on install with the url (i.e. 'example.myshopify.com') serving as the top level storage name. Based on the scaffolding, we saw a lot of developers use cookies to keep track of the url and accessToken, but we felt that doing so was rather risky and we noticed that this part of the code only seemed to be running when the app was installed (see below code for common example). Since we need to be able to get the accessToken and store url long after the install, we were wondering if anyone had any better approaches to keeping track of the store's url.

 

      async afterAuth(ctx) {
        //Auth token and shop available in session
        //Redirect to shop upon auth
        const { shop, accessToken } = ctx.session;

        ctx.cookies.set("shopOrigin", shop, {
          httpOnly: false,
          secure: true,
          sameSite: "none"
        });
        ctx.redirect("/");
      }

 

In order to use the page api  provided by Shopify in combination with Node, we need to provide a route to fetch (i.e. https://example.myshopify.com/admin/api/2020-04/pages.json). Thus, we need to be able to know the url beforehand, which seemed like an ideal job for a GraphQL query. However, a similar problem exists when using GraphQL and Node as you need to provide a route to fetch (i.e. https://<shop>.myshopify.com/admin/api/graphql.json) where you know the <shop> beforehand, which defeats the purpose of making the GraphQL query in the first place.

 

So we tried to do it on the front end with React and Apollo where we were able to successfully make a GraphQL query that returned the url without needing to provide a route, but the returned value was in the form of a jsx element (see below code). Is there a way to make the query and just have it return json information so that we can then plug that data into the page api route? Does anyone have any other ideas for keeping track of the store url? 

 

const getUrl = gql`
  query {
    shop {
      name
      primaryDomain {
        host
      }
    }
  }
`;

export function GetShopUrl() {
  return (
    <Query query={getUrl}>
      {({ data, loading, error }) => {
        if (loading) return <div>Loading…</div>;
        if (error) return <div>{error.message}</div>;
        console.log("Query Results", data);
        console.log("Url", data.shop.primaryDomain.host);
      return <p>{data.shop.primaryDomain.host}</p>;
      }}
    </Query>
  );
}

Any help would be greatly appreciated!

0 Likes
LukasSchreiber
New Member
1 0 0

Just stuck on the same problem, anyone found a solution?

 

0 Likes