useParams 用于阿波罗 GraphQL 查询

Question

我的代码与 react 和 Apollo 客户端有问题，我无法在我的 URL（useParam）中获取 id 并输入我对 apollo 的查询，我尝试了很多可能性，但我找不到合适的。

如果你有合适的，那将是完美的；）

我认为反应路由器部分没问题，但问题是用阿波罗在我的查询中传递 id，我是一个新的 graphql 用户......很酷但不容易直接理解这个概念

const GET_MEETING_ACCESS = gql`
query {
    meeting (id:$id){
      protectedAccess
      
    }
  }
`;


export default function MeetingAccessPage() {
    let { id } = useParams();
    const { loading, error, data } = useQuery(GET_MEETING_ACCESS, {
        variables: { id:id },
          });

    if (loading) return 'Loading...';
    if (error) return `Error! ${error.message}`;
    return (
        <div className='flex flex-col items-center h-screen w-screen bg-gradient-to-r from-blue-600 to-purple-500 bg-gradient-to-r'>
            <div className='flex text-center h-auto p-6 flex-col h-1/3'>
                <img src={logo} alt="logo" className='flex object-fill' />
                <p className='text-white text-xl font-bold pt-6'>{data.Name}</p>
                

这里是我的路由器 React

<ApolloProvider client={client}>
      <Router>
        <Switch>
          <Route path="/meeting/:id">
            <MeetingAccessPage />
          </Route>
        </Switch>
      </Router>
    </ApolloProvider>

Answer 1

您需要将您的查询更新为如下

const GET_MEETING_ACCESS = gql`
  query Meeting($id: String){
    meeting (id:$id){
      protectedAccess
      
    }
  }
`;

在此处阅读有关如何将变量与 GraphQl一起使用的更多信息

Answer 2

您应该在定义 graphql 查询时声明您使用的变量类型。 像这样...

const GET_MEETING_ACCESS = gql`    
    query my_meeting($id: String!) {
       meeting (id:$id){
         protectedAccess
       }
    }
`;

问我你是否不清楚。