How to fetch an url using the SettingToggle polaris component ?

Technical Q&A
1

Hi,

i’m trying to call a route when the merchant click on the Toggle component from Polaris.

But i have the following errors :“Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.”

How can i fixe this issue to call my route : “/create-metafield/”

Here is my code :

import { SettingToggle, TextStyle } from "@shopify/polaris";
import { encode } from "shopify-gid";
import {  useCallback } from "react";
import { useAppBridge } from "@shopify/app-bridge-react";
import { userLoggedInFetch } from "../App";

export function ToggleRelatedProduct(props) {
  const active=false;
  const handleToggle = useCallback(() => {
    const app = useAppBridge();
    const fetch = userLoggedInFetch(app);

    fetch(`/create-metafield/`)
      .then((res) => res.json())
      .then((res) => {
        console.log("then");
        console.log(res);
    });
  }, []);

  const contentStatus = active ? "Deactivate" : "Activate"
  const textStatus = active ? "activated" : "deactivated"

  return (
    
  );
}

Big thx who can help me on this : :heart_eyes:

Sorry for my english, i’m french :grinning_face_with_smiling_eyes:

2

Ok i figured a solution.

I have to define app and fetch outisde of my function and use “let” to déclare my fetch var.