I’m a beginner at Shopify and react js and am trying to develop an app for Shopify using node js and react js. In the index.js file, I want to create a Shopify ScriptTag and have given creating permissions to the app. So when I compile and run it, the app doesn’t display any error, compiles successfully, and returns the Hello statement, but doesn’t create the script. Can anyone guide me to create a script tag?
[Directory image][1]
Below is the code of Index.js which is in the pages folder
index.js
import {useQuery, useMutation, gql} from '@apollo/client';
const CREATE_SCRIPT_TAG = gql`
mutation scriptTagCreate($input: ScriptTagInput!){
scriptTagCreate(input: $input) {
scriptTag {
id
}
userErrors {
field
message
}
}
}
`;
function Index() {
// console.log('Hello hello')
// useMutation(CREATE_SCRIPT_TAG, {variables: {input: {src: "https://eb7645e45ebf.ngrok.io/script-tag.js", displayScope: "ALL",
// event: "onload"}}});
useMutation({variables: {input: {src: "https://f2c8353e41aa.ngrok.io/script-tag.js", displayScope: "ALL"}} });
return(
Sample app Next.js and hello
);
}
export default Index;
Below is the code of script-tag.js file which is in the public folder.
script-tag.js
console.log('this is me script tag!!!!!!!!')
const header = $('header.site-header').parent();
header.prepend('Hello this is coming from the public folder
').css({'background-color':'orange', 'text-align': 'center'})
Code for _app.js
import App from 'next/app';
import Head from 'next/head';
import React from 'react';
import Cookies from 'js-cookie';
import {Provider} from '@shopify/app-bridge-react';
import { AppProvider } from '@shopify/polaris';
import '@shopify/polaris/dist/styles.css';
import translations from '@shopify/polaris/locales/en.json';
import { ApolloClient, InMemoryCache } from '@apollo/client';
import { ApolloProvider } from '@apollo/client';
const client = new ApolloClient({
fetchOptions: {
credentials: 'include',
},
cache: new InMemoryCache()
});
class MyApp extends App {
render() {
const { Component, pageProps } = this.props;
const config = { apiKey: API_KEY, shopOrigin: Cookies.get('shopOrigin'), forceRedirect: true };
return (
);
}
}
export default MyApp;
Server.js
require('isomorphic-fetch');
const dotenv = require('dotenv');
const Koa = require('koa');
const next = require('next');
const { default: createShopifyAuth } = require('@shopify/koa-shopify-auth');
const { verifyRequest } = require('@shopify/koa-shopify-auth');
const session = require('koa-session');
dotenv.config();
const {default: graphQLProxy} = require('@shopify/koa-shopify-graphql-proxy');
const {ApiVersion} = require('@shopify/koa-shopify-graphql-proxy');
const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
const { SHOPIFY_API_SECRET_KEY, SHOPIFY_API_KEY } = process.env;
app.prepare().then(() => {
const server = new Koa();
server.use(session({ secure: true, sameSite: 'none' }, server));
server.keys = [SHOPIFY_API_SECRET_KEY];
server.use(
createShopifyAuth({
apiKey: SHOPIFY_API_KEY,
secret: SHOPIFY_API_SECRET_KEY,
scopes: ['read_products', 'write_products', 'write_script_tags', 'read_script_tags'],
afterAuth(ctx) {
const { shop, accessToken } = ctx.session;
ctx.cookies.set('shopOrigin', shop, {
httpOnly: false,
secure: true,
sameSite: 'none'
})
ctx.redirect('/');
},
}),
);
server.use(graphQLProxy({version: ApiVersion.October20}));
server.use(verifyRequest());
server.use(async (ctx) => {
await handle(ctx.req, ctx.res);
ctx.respond = false;
ctx.res.statusCode = 200;
return
});
server.listen(port, () => {
console.log(`> Ready on http://localhost:${port}`);
});
});