用于 apollo GraphQL 查询的 useParams

问题描述

我的 React 和 Apollo Client 代码有问题，我无法在我的 URL (useParam) 中获取 id 并输入我对 apollo 的查询，我尝试了很多可能性，但我找不到合适的。

如果你有合适的那将是完美的 ;) ?

我认为反应路由器部分没问题，但问题是在我的查询中使用 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>

解决方法

您需要将查询更新为以下内容

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

阅读有关如何使用 variables with GraphQl here

的更多信息 ,

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

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

问我是否不清楚。