Shopify CLI - Custom Application - GraphQL

Pacific_Hustle
Shopify Partner
27 0 10

Background: Used the Shopify CLI to generate a Node Shopify Embedded Custom Application and I notice that in server/server.js that's where router paths, Shopify API, and other things get set.

I have a React component named, ProcessingForm contained in its own file named ProcessingForm.js. 

I'm confused because when I import

import { createClient } from "../server/handlers/index";

The first parameter passed in is the SHOP which is found in my .env but the next argument is accessToken. I don't save the accessToken anywhere. It's found in my server/server.js file specifically here:

app.prepare().then(async () => {
  const server = new Koa();
  const router = new Router();
  server.keys = [Shopify.Context.API_SECRET_KEY];
  server.use(
    createShopifyAuth({
      async afterAuth(ctx) {
        // Access token and shop available in ctx.state.shopify
        const { shop, accessToken, scope } = ctx.state.shopify;

 What I'm wondering is how can I use this accessToken in my components file to create a graphQL client and make mutation requests? I noticed that further down the server/server.js file there's a router that points to:

router.post(
    "/graphql",
    verifyRequest({ returnHeader: true }),
    async (ctx, next) => {
      await Shopify.Utils.graphqlProxy(ctx.req, ctx.res);
    }
  );

I'm not sure if I'm supposed to somehow use this link to make requests?

 

I've already created my mutation function that I'd like the apollo-client to use, but I'm not sure how to actually implement it since my accessToken is retrieved in server/server.js not later on.

Hopefully my question makes sense. It's easier to understand if you've used to the Shopify-CLI to create an Node embedded Shopify custom application as we'd be working with the same boilerplate code. 

Pacific_Hustle
Shopify Partner
27 0 10

^ Bump

0 Likes
Pacific_Hustle
Shopify Partner
27 0 10

Progress is being made, I now have an error: "Invariant Violation: Could not find "client" in the context or passed in as an option. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance in via options."

This is a weird issue because looking at my _app.js file, I have the following code:

 

function MyProvider(props) {
  const app = useAppBridge();

  const client = new ApolloClient({
    fetch: userLoggedInFetch(app),
    fetchOptions: {
      credentials: "include",
    },
  });

  const Component = props.Component;

  return (
    <ApolloProvider client={client}>
      <Component {...props} />
    </ApolloProvider>
  );
}

 

And that is passed into the MyApp class:

 

class MyApp extends App {
  render() {
    const { Component, pageProps, shopOrigin } = this.props;
    return (
      <AppProvider i18n={translations}>
        <Provider
          config={{
            apiKey: API_KEY,
            shopOrigin: shopOrigin,
            forceRedirect: true,
          }}
        >
          <MyProvider Component={Component} {...pageProps} />
        </Provider>
      </AppProvider>
    );
  }
}

 

So my other child components should have access to ApolloProvider and/or client. And I see it in my React Dev Tools but I'm getting that weird issue?

Here's what my index.js looks like: 

 

const Index = () => {
  return (
    <Page title="Page Title">
      <TestForm/>
    </Page>
  );
}

 

 And I have gql and mutation within TestForm so TestForm should ultimately allow me to use the Apollo client found in _app.js...

Where am I going wrong? 

RileySeaburg
Tourist
3 0 0

I'm dealing with the exact same thing.

I believe the issue is that we're at the limits of the Shopify Libraries here.

I believe the dev team has made a couple of breaking changes in the last year of so to try and keep up with the browsers. 

This should be figured out soon.

0 Likes