specifying useShow endpoint

How can I specify the useShow resource/endpoint?

16 Replies

Hi @.chasel. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In refine, you can specify the resource for the Show and ShowButton components using the resource prop. This prop defines the redirection endpoint for the ShowButton and the resource information for the Show component. For the Show component, you can specify the resource like this:

import { Show } from "@refinedev/chakra-ui";  
  
const CustomPage: React.FC = () => {  
 return (  
 <Show resource="categories">  
 <p>Rest of your page here</p>  
 </Show>  
 );  
};

import { Show } from "@refinedev/chakra-ui";  
  
const CustomPage: React.FC = () => {  
 return (  
 <Show resource="categories">  
 <p>Rest of your page here</p>  
 </Show>  
 );  
};

In this example, the Show component reads the resource information from the categories resource. For the ShowButton component, you can specify the resource like this:

import { ShowButton } from "@refinedev/mantine";  
  
const MyShowComponent = () => {  
 return <ShowButton resource="categories" recordItemId="2" />;  
};

import { ShowButton } from "@refinedev/mantine";  
  
const MyShowComponent = () => {  
 return <ShowButton resource="categories" recordItemId="2" />;  
};

In this example, clicking the button will trigger the show method of useNavigation and then redirect the app to the show action path of the categories resource, filling the necessary parameters in the route. Please note that the resourceNameOrRouteName prop is deprecated and you should use the resource prop instead. For more information, you can refer to the refine documentation (https://refine.dev/docs). Sources: - Show Component (https://refine.dev/docs/api-reference/chakra-ui/components/basic-views/show) - ShowButton Component (https://refine.dev/docs/api-reference/mantine/components/buttons/show-button) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@196423433930670080> kapa.ai is still learning and improving, please let us how it did by reacting below

afraid-scarletOP•2y ago

@kapa.ai I am asking about the useShow hook that retrieves the query result. I would like to specify the endpoint

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In the useShow hook, you can specify the resource (which is usually used as an API endpoint path) by passing it as a parameter. Here's an example:

useShow({  
 resource: "categories",  
});

useShow({  
 resource: "categories",  
});

In this example, the useShow hook will fetch data from the "categories" resource. If you want to specify both the resource and id, you can do it like this:

import { useShow, useParsed } from "@refinedev/core";  
  
const { id } = useParsed();  
  
useShow({  
 resource: "custom-resource",  
 id,  
});

import { useShow, useParsed } from "@refinedev/core";  
  
const { id } = useParsed();  
  
useShow({  
 resource: "custom-resource",  
 id,  
});

In this example, the useShow hook will fetch data from the "custom-resource" resource with the specified id. You can also use the setShowId function to set the id value:

import { useShow } from "@refinedev/core";  
  
const { setShowId } = useShow({  
 resource: "custom-resource",  
});  
  
setShowId("123");

import { useShow } from "@refinedev/core";  
  
const { setShowId } = useShow({  
 resource: "custom-resource",  
});  
  
setShowId("123");

In this example, the useShow hook will fetch data from the "custom-resource" resource with the id set to "123". For more information, you can refer to the useShow documentation (https://refine.dev/docs/api-reference/core/hooks/show/useShow). Sources: - useShow Hook (https://refine.dev/docs/api-reference/core/hooks/show/useShow) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@196423433930670080> kapa.ai is still learning and improving, please let us how it did by reacting below

afraid-scarletOP•2y ago

@kapa.ai how to inject environment variables at build time that can be accessed via process.env

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In Next.js, environment variables can be added into your application through a .env.local file. This file should be placed in your project root directory. The variables in this file will be loaded into the Node.js process and can be accessed via process.env. Here's an example of a .env.local file:

API_URL='<https://dev.to/api/api/articles/{id}/unpublish'>  
API_KEY='your_secret_api_key_here'

API_URL='<https://dev.to/api/api/articles/{id}/unpublish'>  
API_KEY='your_secret_api_key_here'

These variables can then be accessed in your application like so:

process.env.API_URL
process.env.API_KEY

process.env.API_URL
process.env.API_KEY

If you want to expose these variables to the browser, you can add a NEXT_PUBLIC_ prefix to the variable name in the .env.local file. For example:

NEXT_PUBLIC_GOOGLE_ANALYTICS_ID='your_google_analytics_id_here'

NEXT_PUBLIC_GOOGLE_ANALYTICS_ID='your_google_analytics_id_here'

This variable can then be accessed in your application like so:

process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID

process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID

Remember to restart your server after adding new environment variables so that they can take effect. Sources: - Next.js Environment Variables (https://refine.dev/blog/next-js-environment-variables) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@196423433930670080> kapa.ai is still learning and improving, please let us how it did by reacting below

afraid-scarletOP•2y ago

@kapa.ai I am using a pure react with react router, not nextjs. Also I would like this to be done during production, not development so I wont be using a .env file. I will be using docker-compose

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In a Docker environment, you can pass environment variables at build time using the args directive in your docker-compose.yml file. Here's an example:

version: '3'
services:
  web:
    build:
      context: .
      args:
        - API_URL
        - API_KEY

version: '3'
services:
  web:
    build:
      context: .
      args:
        - API_URL
        - API_KEY

In this example, API_URL and API_KEY are environment variables that will be passed to the Docker build process. These variables can be accessed in your Dockerfile using the ARG instruction:

FROM node:14
WORKDIR /usr/src/app
ARG API_URL
ARG API_KEY
ENV REACT_APP_API_URL=$API_URL
ENV REACT_APP_API_KEY=$API_KEY
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM node:14
WORKDIR /usr/src/app
ARG API_URL
ARG API_KEY
ENV REACT_APP_API_URL=$API_URL
ENV REACT_APP_API_KEY=$API_KEY
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

In this Dockerfile, API_URL and API_KEY are build-time variables that are passed to the npm run build command. The ENV instruction is used to set these variables as environment variables in the Docker container. In your React application, you can access these variables using process.env:

console.log(process.env.REACT_APP_API_URL);
console.log(process.env.REACT_APP_API_KEY);

console.log(process.env.REACT_APP_API_URL);
console.log(process.env.REACT_APP_API_KEY);

Remember to prefix your environment variables with REACT_APP_ to ensure they are embedded into the build. Please note that this method requires you to have these environment variables (API_URL and API_KEY) set in the shell environment where you run docker-compose up. Sources: - Docker Build Args and Environment Variables (https://refine.dev/blog/docker-build-args-and-env-vars) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@196423433930670080> kapa.ai is still learning and improving, please let us how it did by reacting below

afraid-scarletOP•2y ago

@kapa.ai does react refine or serve allow you to start the server with new environment variables?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can pass environment variables when starting the server with refine. You can do this by prefixing your command with the environment variables you want to set. Here's an example:

API_URL=<https://myapi.com> API_KEY=123456 npm run refine dev

API_URL=<https://myapi.com> API_KEY=123456 npm run refine dev

In this example, API_URL and API_KEY are environment variables that will be available in your application and can be accessed via process.env. You can also pass options that are available in the framework. For example, you can run npm run refine dev --port 3001 to run the app on port 3001. Sources: - Refine CLI Commands (https://refine.dev/docs/packages/documentation/cli) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@196423433930670080> kapa.ai is still learning and improving, please let us how it did by reacting below

afraid-scarletOP•2y ago

@kapa.ai no after I have ran "npm run build" can I still set the app's environment variables?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: @.chasel That's a great question, but unfortunately I am only capable of responding to a maximum of three questions per thread. Don't hesitate to create a new thread for any further questions you have though. I'm here to help!

specifying useShow endpoint

Did you find this page helpful?