Questions and discussions about using the Shopify CLI and Shopify-built libraries.
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.
^ Bump
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?
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.